angular - 选择复选框Angular中的所有项目
问题描述
我有一个包含多个复选框的列表。我已经为单选和多选做了一个功能,用户可以获取单选和多选的数据。现在我被卡住的问题是,当我删除列表中一个复选框的选择然后全选复选框应该被取消选择但我无法做到这一点。
下面是我的代码 HTML
<div item-start class="checkbox-wrapper">
<input type="checkbox" value="Select All" (change)="selectAllLineItem($event)">
</div>
<ion-card *ngFor="let putAwayPurchaseOrderListDetails of putAwayPurchaseOrderListDetailsData | filter:searchText; let i = index">
<div class="checkbox-wrapper">
<input class="form-check-input[(ngModel)]="putAwayPurchaseOrderListDetailsData[i].checked" type="checkbox" >
</div>
<div>
{{putAwayPurchaseOrderListDetails.PO_NUMBER}}
</div>
</ion-card>
TS
selectedLineItem() {
const selectedLineItem = this.putAwayPurchaseOrderListDetailsData.filter((putAwayPurchaseOrderListDetails) => putAwayPurchaseOrderListDetails.checked);
this.navCtrl.push(PutAwayPurchaseOrderItemDetailsPage,{selectedLineItem})
}
selectAllLineItem(event) {
console.log(event)
const checked = event.target.checked;
this.putAwayPurchaseOrderListDetailsData.forEach(item => item.checked = checked);
}
解决方案
一个快速、可行的解决方案。
首先,拆分 ngModel 双重绑定并创建一个处理程序:
...
<input type="checkbox" value="Select All" [(ngModel)]="selectAllItems" (change)="selectAllLineItem($event)">
...
<input class="form-check input
[ngModel]="putAwayPurchaseOrderListDetailsData[i].checked"
(ngModelChange)="onItemChange(i, $event)"
type="checkbox" >
在组件 ts 中:
// new property:
selectAllItems: boolean = false;
...
onItemChange(itemIdx: number, isChecked: boolean) {
this.putAwayPurchaseOrderListDetailsData[itemIdx].checked = isChecked;
// doesn't if selectAllItems is already false.
if (!isChecked) this.selectAllItems = false;
}
应该够了。
推荐阅读
- css - 具有可扩展行的垫表,删除隐藏行
- string - Unity:在这种情况下,比较字符串似乎不起作用?
- python - 如何将一个元素与列表中的其他元素进行比较
- oracle - PL-SQL:为什么使用绑定变量输入的动态语句不起作用?
- continuous-integration - 有没有办法避免损坏或未经测试的代码使用 CI 上线?
- javascript - 如何将键/值对数组更新为猫鼬?
- java - android.view.InflateException:二进制 XML
- python - Python websockets错误处理:越来越多的线程
- python - 方法参数还是实例属性?
- excel - vba 宏从一张表中复制数据并将其保存为新工作簿