Question

点击事件 ng-click =＆＃34; $ ctrl.toggleSub（state）＆＃34; 在触发 ng-if =＆＃的第一行34;第二行中的showSubCat＆＃34; 事件。这使我在点击时显示第二行。

问题是它导致所有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 boolean成为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中的每个项，它将有所不同。

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

1 个答案: