带有 ng-repeat 的条件计数器

Question

我想将奇数类和偶数类应用于“父”行。我想知道是否有办法只增加父母的计数器。 有没有办法做到这一点？我设置它的方式似乎并没有增加计数器。

...
<tbody ng-init="parentCount=0">
  <tr ng-repeat="value in finalArr"
      ng-class={'parentRow': value.isParent, 'childRow': !value.isParent}
      parentCount="{value.isParent ? parentCount = parentCount + 1}"
      ...
  >
    <td>
      id: {{ value.isParent ? parentCount : '' }}
    </td>
    ...
 </tr>
    ...
</tbody>
...

Answer 1

更新：

正如丹尼尔所指出的，我误解了这个问题。 value 对象可以是父对象或子对象，如果它是父对象，您只想增加计数器。这是我能想到的解决方案：

var app = angular.module("app", []);

app.controller('ctrl', ['$scope', function($scope) {
  $scope.counter = {
    parentCount: 0
  }
  
  $scope.incrementParent = function (item) {
    if (item.isParent) {
      $scope.counter.parentCount++
    }
    return $scope.counter.parentCount
  }
  
  $scope.items = [
    {name: 'a', isParent: true},
    {name: 'b', isParent: true},
    {name: 'c', isParent: false},
    {name: 'd', isParent: false},
    {name: 'e', isParent: true},
    {name: 'f', isParent: true},
  ]
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="item in items"  ng-init="count = incrementParent(item)">
    {{item.name}} - the parent count: {{item.isParent ? count : 'is a child'}}
  </div>
  
</div>

如果你想内联，你可以把incrementParent函数压缩成一行（虽然我觉得不是很可读）：

<div ng-repeat="item in items" ng-init="count = (item.isParent ? (counter.parentCount = counter.parentCount + 1) : counter.parentCount)">

注意：

我将parentCount 放在一个对象上，因为ng-repeat 将为每个项目创建一个新范围。如果您在模板中直接分配给parentCount，您将修改子范围而不是父范围。

我们为每个项目创建当前parentCount 值的快照，并将其分配给ng-init 中的变量count。如果您直接对每个项目使用counter.parentCount，它将不起作用，因为在循环结束后它们都将是相同的值。

原文：

在ng-repeat 范围内，有一个$index 属性可以用作计数器（只是它从0 开始）。 AngularJS 维护它，所以你不必自己增加它。最好只使用那个。

关于为什么您的计数器不增加，"{value.isParent ? parentCount = parentCount + 1}" 似乎不是有效的 JavaScript 语法（对于三元运算符，您需要 : 部分）。我怀疑它会抛出，AngularJs 会抓住它并忽略它。 Angular 无法识别您添加到 td 的 parentCount 属性。 Angular 只接受注册的指令或绑定，不接受随机属性。