TypeScript , Angular4 多层复选框问题

Question

如下图样式复选框，如何逻辑思路是怎么样的？麻烦指点一下！需要汇总价格[暂时不变动商品数量]

学习了半天，只弄出一点点……

<input type="checkbox" [(ngModel)]="commodity.checked" (change)="onCheckChangeCommodity(commodity,index)">

onCheckChangeCommodity(commodity: any,index: any):void{
   this.commodityCheck.num = this.commodityCheck.num + 1;
   }else{
   this.commodityCheck.num = this.commodityCheck.num - 1;
   }
  
   if((this.commodityCheck.num === this.commodityCheck.total) && this.commodityCheck.num > 0){
   this.totalChecked = true;
   }else{
   this.totalChecked = false;
   }
}

Answer 1

模板

<div>
  <label><input type="checkbox" [(ngModel)]="checked" (change)="selectAll()">全选</label>
  <div style="padding-left:1em" *ngFor="let item of datas">
    <label><input type="checkbox" [(ngModel)]="item.checked" (change)="selectItemAll(item)">全选</label>
    <div style="padding-left:1em" *ngFor="let item1 of item.items">
      <label><input type="checkbox" [(ngModel)]="item1.checked" (change)="selectItem(item1,item)">选择</label>
      名称：{{item1.name}} 价格：{{item1.price}}
    </div>
  </div>
  总价：{{getTotal()}}
</div>

ts

checked = false
  datas = [{
    checked: false,
    items: [{
      checked: false,
      name: '商品11',
      price: 2
    }, {
      checked: false,
      name: '商品12',
      price: 3
    }]
  }, {
    checked: false,
    items: [{
      checked: false,
      name: '商品21',
      price: 2
    }, {
      checked: false,
      name: '商品22',
      price: 3
    }]
  }]
  getTotal() {
    return this.datas.reduce((state, item) => {
      return item.items.reduce((state, item1) => {
        return state + (item1.checked ? item1.price : 0)
      }, state)
    }, 0)
  }
  selectAll() {
    this.datas.forEach(item => {
      item.checked = this.checked
      item.items.forEach(item1 => {
        item1.checked = this.checked
      })
    })
  }
  selectItemAll(item) {
    item.items.forEach(item1 => {
      item1.checked = item.checked
    })
    if (!item.checked) {
      this.checked = false
    } else {
      this.checked = this.datas.reduce((prev, item) => prev && item.checked, true)
    }
  }
  selectItem(item, parent) {
    if (!item.checked) {
      parent.checked = this.checked = false
    } else {
      parent.checked = parent.items.reduce((prev, item) => prev && item.checked, true)
      if (parent.checked) {
        this.checked = this.datas.reduce((prev, item) => prev && item.checked, true)
      } else {
        this.checked = false
      }
    }
  }

Answer 2

用 angular 就要多用绑定。。

.template

<table>
<tbody>
<ng-container *ngFor="let group of groups">
<tr style="background-color: gray;">
 <td><input type="checkbox" [(ngModel)]="group.checked" (change)="turnAll(group)">全选</td>
 <td>{{group.name}}</td>
</tr>
<tr *ngFor="let item of group.items">
 <td><input type="checkbox" [(ngModel)]="item.checked"></td>
 <td>{{item.price}}</td>
 <td>{{item.prop1}}</td>
 <td>{{item.propN}}</td>
</tr>
</ng-container>
</tbody>
</table>
<h3>total: {{ total }}</h3>

.ts

groups: Array<any> = [{ name: 'group1', items:[...] }, { name: 'group2', items:[...] }];

get total():number{
    return this.groups.reduce((result, group) => 
      result + group.items.reduce((r,i)=>) i.checked ? (i.price + r) : r, 0);
}

turnAll(group){ group.items.forEach(i=>i.checked=group.checked); }