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

Question

第一行中有一个触发 ng-if="showSubCat" 事件的点击事件 ng-click="$ctrl.toggleSub(state)"在第二排。这使得当我单击时出现第二行。

问题在于，它导致所有 ng-repeat 选项都出现，而不是仅出现我单击的选项。

例如我得到:
家长
- child
- child
家长
- child
- child

我希望它的行为像这样:
家长
- child
- child
父级

我只希望单击的 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 bool 值设置为 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>

通过将 state 迭代对象的 showSubCat bool 值部分设置为 state 迭代对象，父级 ng-repeat 中的每个项目都会有所不同。