如何仅触发父目标子单元的ng-click事件
问题描述:
发生点击事件ng-click =“$ ctrl.toggleSub(state)” in the first row is triggereding the ng-if =“showSubCat “事件在第二行。这让我点击时出现第二行。如何仅触发父目标子单元的ng-click事件
问题是,它导致所有的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>
答
充分利用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
中的每个项目将是不同的。
嘿,非常感谢!这工作完美 – MambaNation