如何仅触发父目标子单元的ng-click事件

Question

发生点击事件ng-click =“$ ctrl.toggleSub（state）” in the first row is triggereding the ng-if =“showSubCat “事件在第二行。这让我点击时出现第二行。

问题是，它导致所有的ng-repeat选项出现，而不是我单击的那个选项。

比如我越来越：
家长
- 儿童
- 儿童
父
- 儿童
- 儿童

我想它这样的表现：
家长
- 孩子
- 孩子
父母

我只想点击ng-repeat选项来相应地展开。我试过传递状态对象，但没有任何运气。任何帮助将不胜感激

toggleSub(state) { 
    this.$log.log(state) 
    this.$scope.showSubCat = !this.$scope.showSubCat 
    } 

<tr md-row ng-repeat-start="state in country.states | orderBy: query.order"> 
     <td md-cell><a ng-click="$ctrl.toggleSub(state)">{{state.name}}</a></td> 
     <td md-cell>-</td> 
     <td md-cell>{{state.totalCount}}</td> 
     </tr> 
     <tr md-row ng-repeat-end 
       ng-repeat="subcat in state.data | orderBy: 'subcategory'" 
       ng-if="showSubCat"> 
     <td md-cell></td> 
     <td md-cell>{{subcat.subcategory}}</td> 
     <td md-cell>{{subcat.count}}</td> 
     <td md-cell>{{subcat.percentage}}</td> 
     </tr> 

Answer 1

充分利用showSubCat布尔的state迭代对象的属性：

toggleSub(state) { 
    this.$log.log(state) 
    //this.$scope.showSubCat = !this.$scope.showSubCat 
    state.showSubCat = ! state.showSubCat; 
    } 

<tr md-row ng-repeat-start="state in country.states | orderBy: query.order"> 
     <td md-cell><a ng-click="$ctrl.toggleSub(state)">{{state.name}}</a></td> 
     <td md-cell>-</td> 
     <td md-cell>{{state.totalCount}}</td> 
     </tr> 
     <!-- BEFORE 
     <tr md-row ng-repeat-end 
       ng-repeat="subcat in state.data | orderBy: 'subcategory'" 
       ng-if="showSubCat"> 
     --> 
     <!-- AFTER --> 
     <tr md-row ng-repeat-end 
       ng-repeat="subcat in state.data | orderBy: 'subcategory'" 
       ng-if="state.showSubCat"> 
     <!-- --> 
     <td md-cell></td> 
     <td md-cell>{{subcat.subcategory}}</td> 
     <td md-cell>{{subcat.count}}</td> 
     <td md-cell>{{subcat.percentage}}</td> 
     </tr> 

按制造的showSubCat布尔部分迭代对象，它对于父母ng-repeat中的每个项目将是不同的。