feat(inputs\multi-checkbox): add multi-checkbox directive

This commit is contained in:
tibing 2016-07-08 17:00:07 +03:00
parent e63812f011
commit 70cdff101f
12 changed files with 270 additions and 94 deletions

View file

@ -0,0 +1,45 @@
import {Component, Input, Self} from '@angular/core';
import {ControlValueAccessor, NgModel} from '@angular/forms';
import {BaCheckbox} from '../baCheckbox';
@Component({
selector: 'ba-multi-checkbox[ngModel]',
template: require('./baMultiCheckbox.html'),
directives: [BaCheckbox]
})
export class BaMultiCheckbox implements ControlValueAccessor {
@Input() baMultiCheckboxClass:string;
@Input() propertiesMapping:any;
public model: NgModel;
public state: boolean;
public constructor(@Self() state:NgModel) {
this.model = state;
state.valueAccessor = this;
}
public getProp(item: any, propName: string): string {
const prop = this.propertiesMapping[propName];
if (!prop) {
return item[propName];
} else if (typeof prop === 'function') {
return prop(item);
}
return item[prop];
}
public onChange(value: any): void {}
public onTouch(value: any): void {}
public writeValue(state: any): void {
this.state = state;
}
public registerOnChange(fn: any): void {
this.onChange = function(state: boolean) {
this.writeValue(state);
this.model.viewToModelUpdate(state);
}
}
public registerOnTouched(fn: any): void { this.onTouch = fn; }
}

View file

@ -0,0 +1,10 @@
<div class="{{baMultiCheckboxClass}}">
<ba-checkbox *ngFor="let item of state"
[(ngModel)]="item[propertiesMapping.model]"
[baCheckboxClass]="getProp(item, 'baCheckboxClass')"
[label]="getProp(item, 'label')"
[disabled]="getProp(item, 'disabled')"
[value]="getProp(item, 'value')"
id="{{getProp(item, 'id')}}">
</ba-checkbox>
</div>

View file

@ -0,0 +1 @@
export * from './baMultiCheckbox.component'