TypeScript , Angular4 多層復(fù)選框問(wèn)題

如下圖樣式復(fù)選框，如何邏輯思路是怎么樣的？麻煩指點(diǎn)一下！需要匯總價(jià)格[暫時(shí)不變動(dòng)商品數(shù)量]

學(xué)習(xí)了半天，只弄出一點(diǎn)點(diǎn)……

圖片描述

<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;
   }
}

回答

編輯回答

賤人曾

模板

<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}} 價(jià)格：{{item1.price}}
    </div>
  </div>
  總價(jià)：{{getTotal()}}
</div>

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
      }
    }
  }

2018年1月13日 06:24

編輯回答

風(fēng)畔

用 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); }

2017年6月23日 03:19