angular4 checkbox復選框的全選，反選及個別選擇

<label><input type="checkbox" name="" [(ngModel)]="master">全選</label> 
<table>
      <tr *ngFor="let dep of departs">
          <td><label><input type="checkbox" name="" [(ngModel)]="dep.status" [(checked)]="master">{{dep.name}}</label></td>
      </tr>
</table>

 只需要在ts里聲明departs

private departss = [
    {'name':'張三','s':false},
    {'name':'李四','s':false},
    {'name':'王五','s':false}
  ]

就可以完成全選和取消全選效果

 上面這種完成的效果如下，全選反選和個別選擇可以實現，但有個問題：當取消個別選擇的時候全選按鈕沒有取消勾選

解決辦法，在點擊全選之后禁用下面的按鈕，只有取消全選之后，才能選擇下面的

<div *ngFor="let dep of departs;let i=index">
      <label *ngIf="dep.name=='全選'">
          <input type="checkbox" name="checkEp" (click)="checked(i)" [(ngModel)]="checked[i]">
      {{dep.name}}
    </label>
    <label *ngIf="dep.name!=='全選'">
          <input type="checkbox" name="checkEp" [(ngModel)]="checked[i]" [disabled]="checked[0]" [(checked)]="checked[0]">
      {{dep.name}}
    </label>
  </div>

ts

private departs = [
    {name:'全選'},
    {name:'張三'},
    {name:'李四'},
    {name:'王五'}
  ]

 //全選
  checked(m){
      this.checkAll(m,m.checked[0]);
　 }

  checkAll(dir,boolean){
     dir.checked=[];
     dir.forEach(i=>{
         dir.checked.push(boolean);
     })
  }

效果如下

這樣一來就比較符合邏輯了.....but,直接給禁用掉有寫太過霸道，如果數據一多的話，想要選擇除某個人或某幾個人之外的其他人就很麻煩

 

這種也確實不符合用戶習慣，還是不禁用才好，於是。。。更新下寫法

 html

<div *ngFor="let dep of departs;let i = index">
          <label><input type="checkbox" [(ngModel)]="dep.checked" (change)="checkEvent(dep,i)">{{dep.name}}</label>
</div>

ts

departs = [
    {'name':'全選',checked:false},
    {'name':'張三',checked:false},
    {'name':'李四',checked:false},
    {'name':'王五',checked:false}
  ]

checkEvent(item,i){
      
      if(i===0){ // 如果點擊的是第一個全選按鈕，就實現全選取消全選
          if(item.checked){
              this.departs.forEach(m=>{m.checked = true})
          }else{
              this.departs.forEach(m=>{m.checked = false})
          }
      }else{
          let res = this.departs.some(m=>{return !m.checked});
          if(res){ // 如果全選以后，其中一個或多個取消選擇，就把第一個全選按鈕取消勾選
              this.departs[0].checked = false;
          }
          let flag = true;
          for(var n=1;n<this.departs.length;n++){
              if(!this.departs[n].checked){
                  flag = false;
              }
          }
          if(flag){  // 如果全選以后，其他的全部選中了，就把全選按鈕也選中
              this.departs[0].checked = true;
          }
      }
  }

最終，終於實現想要的效果

 

這個效果順眼多了，也更符合用戶習慣，當然，如果有更好更有效率的實現方法，也歡迎提出~