javascript - ng-repeat 循环计数内的 Angular ng-repeat

Question

我有以下代码:

<div ng-repeat="list in [[1,2,3,4], [1,2,3,4]] track by $index">
    <div id="{{counter}}" ng-repeat="listChild in list track by $index">
        {{listChild}}
    </div>
</div>

我想让 counter 成为元素的编号，但相对于整个父数组。我怎样才能让它工作，以便 div 连续计数，而不是作为两个单独的数组。是这样的:

<div>
    <div id="1">
        {{listChild}}
    </div>
    <div id="2">
        {{listChild}}
    </div>
    <div id="3">
        {{listChild}}
    </div>
    <div id="4">
        {{listChild}}
    </div>
</div>
<div>
    <div id="5">
        {{listChild}}
    </div>
    <div id="6">
        {{listChild}}
    </div>
    <div id="7">
        {{listChild}}
    </div>
    <div id="8">
        {{listChild}}
    </div>
</div>

Answer 1

下面的代码考虑了父数组中不同的数组长度。 $scope.precedingCount 跟踪直到给定内部数组开头的滚动总数

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

app.controller('myController', function($scope) {
  $scope.counter = 0;

  $scope.data = [[1,2,3,4], ['a','b','c','d', 'e', 'f'], ['any', 'other', 'data', 'needed']];

  $scope.precedingCount = {
    0: 0
  };

  for(var i=1; i<$scope.data.length; i++) {
    $scope.precedingCount[i] = $scope.precedingCount[i-1] + $scope.data[i-1].length
  }

  $scope.combinedIndex = function(oIndx, iIndx) {
    return $scope.precedingCount[oIndx] + iIndx
  }
});

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

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="list in data track by $index" ng-init="outerIndex = $index">
    <div id="{{combinedIndex(outerIndex, $index)}}" ng-repeat="listChild in list track by $index">
        {{listChild}} - {{counter}} - {{outerIndex}} - {{$index}} - {{combinedIndex(outerIndex, $index)}}
    </div>
  </div>

  <br />
  <br />
  
  <div>
    The count of the previous indices: {{precedingCount}}
  </div>
</div>