Angular實現全選後的取消其中一個選項則不能實現全選
阿新 • • 發佈:2018-11-19
全選 angular stat html sam status 其中 click mas
在前面一章我們實現了全選與反選,那麽在這一章我們要實現的是取消個別的則不能實現全選
也應該從狀態是否被選中入手
html:
<td>
<input type="checkbox" [(checked)]="item.status" (click)="checkboxClick($event,i);checkBoxOne()">
</td>
checkboxClick(e,i){
let checkedOne = e.target.checked; //首先獲得當前狀態
this.sampleList[i].status = checkedOne;
if(!checkedOne){ // 如果當前沒有被選中
this.master = false; //不能實現全選則全選按鈕也沒有被選中
}else {
for(let m=0;m<this.sampleList.length;m++){ //遍歷表格中的每一個
let key = this.sampleList[m];
if(!key.status){ //如果有一個未選中,則不能實現全選,現在就要終止循環,不再繼續進行
this.master = false;
break;
}else{
this.master = true; //如果一個也沒有不是沒選中狀態的,那就說明都是選中狀態。全選按鈕即可以實現全選
}
}
}
};
Angular實現全選後的取消其中一個選項則不能實現全選