Angularjs - 嵌套的 ng-repeat 全局索引答案

【问题标题】：Angularjs - nested ng-repeat global indexAngularjs - 嵌套的 ng-repeat 全局索引
【发布时间】：2019-06-18 00:54:32
【问题描述】：

我有下一个模板：

<div data-ng-repeat="supplier in order.Suppliers" data-ng-init="supplierIndex = $index">
    <div data-ng-repeat="group in supplier.Groups">
         {{something}}
    </div>
</div>

和型号：

$scope.order = {
    Suppliers: [
        {
            Groups: [{ id: 'sss'}, {id: 'ddd'}]
        },
        {
            Groups: [{ id: 'qqqq'}, {id: 'www'}, {id: 'xxx'}]
        },
        {
            Groups: [{ id: 'ooo'}]
        }
    ]
}

我需要显示全局组索引，所以输出应该是这样的：

0 1 2 3 4 5

我知道我可以在每个需要显示全局组索引的地方使用通过传递组 id 计算索引的函数，但是如何最优雅地完成这个目标？

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-ng-init ng-init

【解决方案1】：

您可以使用{{$index}} 在您的列表中显示组索引。

【讨论】：

$index 内部 ng-repeat 结果为 0 1 0 1 2 0
你可以试试 {{$parent.$index}} 吗？

【解决方案2】：

您可以在控制器中合并这样的组。

 $scope.mergedGroups = [];
  for(var i=0;  i < $scope.order.Suppliers.length;  i++){
    for(var k=0;  k < $scope.order.Suppliers[i].Groups.length;  k++){
       $scope.mergedGroups.push($scope.order.Suppliers[i].Groups[k]);
    }
  }

然后您可以使用单个 ng-repeat 并完成。

<div data-ng-repeat="group in mergedGroups" >
    {{group}} {{$index}}
</div>

【讨论】：

【解决方案3】：

您的选择：

$parent.$index
将供应商索引放入供应商对象
创建组件<supplier-info supplier="supplier" index="$index">

【讨论】：

【解决方案4】：

如果只在 html 中完成：

<div data-ng-init="$parent.index = 0" data-ng-repeat="supplier in order.Suppliers">
  <div data-ng-repeat="group in supplier.Groups">
    <span data-ng-init="index=$parent.$parent.index;$parent.$parent.index = $parent.$parent.index + 1;">
      {{index}}
    </span>
  </div>
</div>

【讨论】：