如何动态创建复选框并获取所有选中的复选框的角度值2
问题描述:
这是我的html。我想所有选定的复选框的值时,任何复选框被选中或取消选中即(其他城市)触发的事件如何动态创建复选框并获取所有选中的复选框的角度值2
<div class="checkbox checkbox-primary" *ngFor="let category of categories; let i = index">
<input type="checkbox" id="checkbox_category" (change)="search(category, $event)" />
</div>
这是角2组件我的搜索方法:
selectedItems: any = [];
search(category, event) {
// set selectedItems here
}
答
我解决了这样的问题:https://plnkr.co/edit/mWtlkydF0FzioS3c2esQ?p=preview
@Component({
selector: 'my-app',
template: `
<div class="checkbox checkbox-primary" *ngFor="let category of categories; let i = index">
<input type="checkbox" id="checkbox_category_{{i}}" (change)="search(category, $event)" />
<label> {{category?.name }} </label>
</div>
<b>selectedItems</b>: {{selectedItems | json}}
`,
})
export class App {
name:string;
categories: any;
selectedItems: any = [];
constructor() {
this.name = 'Angular2';
this.getDate();
}
//this data may come from api
getDate(){
this.categories = [
{name: 'ferrari', price: 123},
{name: 'porche', price: 456},
{name: 'bentley', price: 789}
];
}
search(category, event) {
var index = this.selectedItems.indexOf(category.name);
if (event.target.checked) {
if (index === -1) {
this.selectedItems.push(category.name);
}
} else {
if (index !== -1) {
this.selectedItems.splice(index, 1);
}
}
console.log(this.selectedItems);
}
}
答
你可以做是这样的: https://plnkr.co/edit/94Gubz?p=preview
@Component({
selector: 'my-app',
template: `
<div class="checkbox checkbox-primary" *ngFor="let category of categories; let i = index">
<input type="checkbox" id="checkbox_category" [checked]="category.selected" (click)="select(i)" /> {{category.value}}
</div>
`,
})
export class App {
categories: any;
selected: any;
constructor() {
this.categories = [
{value: 'ferrari', selected: false },
{value: 'porche', selected: false },
{value: 'bentley', selected: false }
];
}
select(index) {
this.categories[index].selected = !this.categories[index].selected
}
search() {
this.selected = this.categories.filter(cat => cat.selected)
}
}
console.log(this.selected),看到它不会返回所选项目的数组,如我所料。 – saif