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

【问题标题】：How to only trigger parent ng-click event for target child element如何仅触发目标子元素的父 ng-click 事件
【发布时间】：2017-11-18 08:04:32
【问题描述】：

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

问题是它导致所有 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>

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案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 设为state 迭代对象的布尔部分，父ng-repeat 中的每个项目都会有所不同。

【讨论】：