Radio List组件提取起来很方便,不想CheckBox那么复杂。
radio-list.component.ts
dioItem } from '../../model/radio';
import { NgModel } from '@angular/forms';
@Component({
selector: 'app-radio-list',templateUrl: './radio-list.component.html',styleUrls: ['./radio-list.component.css']
})
export class RadioListComponent implements OnInit {
@Input() list: RadioItem[];
@Input() name: string;
@Input() colNum: number = 6;
@Input("selectModel") model: string;
@Output("selectChange") onChange: EventEmitter = new EventEmitter();
constructor() { }
ngOnInit() {
}
changeSelected() {
let data = { value: this.model,name: this.name };
this.onChange.emit(data);
}
}
radio-list.component.html
dio abc-radio-primary">
dio" [value]="item.id" [(ngModel)]="model" (change)="changeSelected()" name="{{name}}" id="{{name}}_{{item.id}}">