AngularJS-跨多个ng-repeat循环跟踪内部$ index

Question

我试图列出嵌套的数据结构，同时将内部$index保持为运行索引。

为了说明，这是我想要实现的：

Category Name 1
    1. Foo
    2. Bar
    3. Fez

Category Name 2
    4. Qux
    5. Baz

这就是我现在得到的结果：

Category Name 1
    1. Foo
    2. Bar
    3. Fez

Category Name 2
    1. Qux
    2. Baz

如您所见，我希望索引能够在父循环之间结转。在常规编程中要解决的一个简单问题，但是事实证明，在angularjs循环本身中很难做到这一点。

这里是当前正在运行的内容的简化版本，number元素上的自定义li属性是棘手的位。

<div ng-repeat="(category, items) in groups">
    <h2 class="category-name">{@ category.name @}</h2>
    <ul class="items-list">
        <li id="{@ item.id @}" my-widget ng-repeat="item in items" number="$index">
        </li>
    </ul>
</div>

我尝试使用范围变量，并尝试在循环中对其进行递增，但是它始终显示为最后一个数字：

// Controller.js
$scope.count = 0

// view.html
<li ... number="count + 1"></li> <!-- or count++ or any sane variation -->

甚至是丑陋的东西

... </li>
<p hidden>{@ increment() @}</p>

// Controller.js
$scope.increment = function(){$scope.count++;};

但是这些只会使AngularJS爆炸并显示错误消息。

我也曾尝试在父循环中使用ng-init来存储循环索引，但是我一定误会了如何正确使用它。很抱歉没有显示更多工作，但我无法到达自己所在的其他地方。

我该怎么做才能完成循环？

任何帮助将不胜感激！

Answer 1

将全局索引属性添加到项目并进行计算。或者，如果您不想更改项目对象，则将其创建为地图：

$scope.myIndexMap = {};
globalIndex = 0;
forEach..., forEach...
  globalIndex++;
  $scope.myIndexMap[item.id] = globalIndex;

P.S。许多人试图在html中做怪异而复杂的事情-最好不要做。视图应尽可能简单。