Javascript 离子/角度复选框自定义逻辑
我正在用Ionic 2编写一个小应用程序。在这个应用程序中,我有一个“Checkboxmodal”,它可以为我的appstate中的元素列表创建一个选项 在html中:Javascript 离子/角度复选框自定义逻辑,javascript,html,angular,typescript,ionic2,Javascript,Html,Angular,Typescript,Ionic2,我正在用Ionic 2编写一个小应用程序。在这个应用程序中,我有一个“Checkboxmodal”,它可以为我的appstate中的元素列表创建一个选项 在html中: <ion-list> <ion-item *ngFor="let key of itemDic.keys()"> <ion-label>{{itemDic.get(key)}}</ion-label> <ion-checkbox (cl
<ion-list>
<ion-item *ngFor="let key of itemDic.keys()">
<ion-label>{{itemDic.get(key)}}</ion-label>
<ion-checkbox (click)="toggleItem(key)" value="key" [checked]="selectedItems.indexOf(key) > -1"></ion-checkbox>
</ion-item>
</ion-list>
// Data used
this.itemDic = ... // local. saves possible options
this.selectedItems = ... // reference to appstate (global object). saves the selected values
// toggle function
toggleItem(item: any) {
if(searchState.contains(...)) {
searchState.remove(...);
} else {
if (this.selectedItems.length >= this.maxItems)
return;
searchState.set(...);
}
}
当我想扩展它的功能,一次只允许x个选项时,我遇到了以下问题:
- 数据绑定似乎不起作用
- Angular将更新视图,即使我的函数没有更改模型
- 停止angular/ionic更改视图或数据
- 我自己决定模型的改变
- 仅将数据的当前值显示为绑定
<ion-checkbox
(click)="toggleItem(key)"
value="key"
[disabled]="selectedItems.indexOf(key) === -1 && selectedItems.length >= 3"
[checked]="selectedItems.indexOf(key) > -1">
</ion-checkbox>
我发现,您可以通过绑定到disabled属性来禁用复选框。所以我只需检查当前复选框
- 没有检查
- 选中的复选框超过最大值