Angular实现全选后的取消其中一个选项则不能实现全选

在前面一章我们实现了全选与反选,那么在这一章我们要实现的是取消个别的则不能实现全选

也应该从状态是否被选中入手

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; //如果一个也没有不是没选中状态的,那就说明都是选中状态。全选按钮即可以实现全选
}
}

}
};

 

posted @ 2018-11-19 16:16  小小小晨  阅读(488)  评论(0编辑  收藏  举报