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 循环本身中证明有点困难。

这是当前运行的简化版本，li 元素上的自定义 number 属性是棘手的部分。

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

数据的结构是这样的（简化的代码使用对象）：

{
  'Category Name 1': [{id:1},{id:2}],
  'Category Name 2': [{id:3},{id:4}]
}

请注意，不能保证 id 将/应该是连续的。

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

// Controller.js
$scope.count = 0

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

甚至像这样丑陋的东西：

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

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

此外，这些只会让 AngularJS 出现关于 $apply 的错误消息。

我也尝试在父循环中使用ng-init 来存储循环索引，但我一定误解了如何正确使用它。很抱歉没有展示更多作品，但我无法到达我所在的地方以外的任何地方..

我可以做些什么来延续循环？

任何帮助将不胜感激！

Answer 1

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

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

附：很多人试图在 html 中做奇怪而复杂的事情——最好不要。视图应该尽可能简单。