【Angular】-实现全选

效果如下：

实现过程：
html：

<itoo-accordionTab  id="chapterMenu" (selectedChange)="toggle($event,menu3)" [selected]="selectedChapter">
    <itoo-header>
      <div #menu3 id="menu3" class="menu-header">
        <span *ngIf="menu3.id == active" class="fa fa-chevron-down fa-2x icon-right"></span>
        <span *ngIf="menu3.id != active" class="fa fa-chevron-right fa-2x icon-right"></span>
        <span class="header">&nbsp;&nbsp;&nbsp; 章节</span>
      </div>
    </itoo-header>

    <div class="submenu">
      <div class="weui-cells">
          <label>
            <input type="checkbox" [(ngModel)]="selectall" (click)="selectAll(selectall)">&nbsp;&nbsp;
            全选
          </label>
          <div class="weui-cell weui-check__label" *ngFor="let chapter of chapters,let i = index">
                  <div class="weui-cell__bd" (click)="checkChapter(i)">
                      <input  type="checkbox" class="ui-check" [(ngModel)]="chapterBox[i]" ng-checked="selectall"/>&nbsp;&nbsp;
                      <i class="weui-icon-checked">{{chapter.chaptername}}</i>
                  </div>           
              </div>            
          </div>
      </div>
  </itoo-accordionTab>

将chapters赋给具体章节，然后添加全选的checkbox标签，利用[(ngModel)]=”selectall”进行双向绑定，并且在具体章节中让ng-checked=”selectall”，这样在选择全选按钮的时候，就会判断具体章节要不要被选中。

ts文件：

    selectall=false;
    selectAll(selectall) {
        for(var i=0;i<this.chapters.length;i++){
            if (selectall==false){
                this.chapterBox[i] = true;
            } else {
                this.chapterBox[i] = false;
            }
        }
    }

刚刚接触，若各位大神有更好的办法，欢迎指点。