嵌套ng重复上的Angularjs增量计数器

我有一个想在嵌套ng repeat上维护计数器的情况

<ul>
    <li ng-repeat="some in something">
        <span> index {{someCounter}} </span>
        <ul>
            <li ng-repeat="chid in some">
                <span> index {{someCounter}} </span>
            </li>
        </ul>
    </li>
</ul>

        <tbody>
            <tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
                <td>{{row+1}}</td>
                <td class="text-primary" ng-class="appliedClass(!t.status)"
                    ng-repeat="(col, t) in h.seats track by $index"
                    ng-if="col >= (row)*3 && col < (row+1)*3">
                        <span ng-show="t.status"> X </span> 
                        <span ng-show="!t.status"> - </span>
                </td>
            </tr>
        </tbody>

索引{someCounter}


索引{someCounter}

以下哪一项应该输出

• 索引0
  • 指标1
  • 指标2
• 指标3

简言之，我不希望每个ng重复都有单独的索引，而是希望每个ng重复都有相同的索引

<ul>
    <li ng-repeat="some in something">
        <span> index {{someCounter}} </span>
        <ul>
            <li ng-repeat="chid in some">
                <span> index {{someCounter}} </span>
            </li>
        </ul>
    </li>
</ul>

        <tbody>
            <tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
                <td>{{row+1}}</td>
                <td class="text-primary" ng-class="appliedClass(!t.status)"
                    ng-repeat="(col, t) in h.seats track by $index"
                    ng-if="col >= (row)*3 && col < (row+1)*3">
                        <span ng-show="t.status"> X </span> 
                        <span ng-show="!t.status"> - </span>
                </td>
            </tr>
        </tbody>

---

谢谢

据我所知，要做到这一点，没有简单的方法。您需要做的是预处理正在重复的对象，并以循环方式为其分配计数器。我想不出一个单独用HTML实现的方法。此外，我认为这对阵列不起作用，以下是我的尝试：

假设您将在某个点对对象进行排序，以便它们按顺序显示：

$scope.something = [
      {one: {ten: 10}, eleven: {nine: 9}, hundred: {blue: 100}}, 
      {one: {ten: 10}, eleven: {nine: 9}, hundred: {blue: 100}}, 
      {one: {ten: 10}, eleven: {nine: 9}, hundred: {blue: 100}}, 
      {one: {ten: 10}, eleven: {nine: 9}, hundred: {blue: 100}}, 
      {one: {ten: 10}, eleven: {nine: 9}, hundred: {blue: 100}}, 
      ];

var counter = 0;
angular.forEach($scope.something, function(value, index){
  //console.log(value); 
  value.counter = counter++;

  angular.forEach(value, function(subValue, subIndex){
    //console.log(subValue); 
    subValue.counter = counter++; 
  });

});
console.log($scope.something);

HTML:

索引{some.counter}


索引{child.counter}

---

Plunker:

在嵌套的ng repeat上维护单独的计数器很容易

您可以使用以下语法在嵌套的ng repeat中获取计数器（col）。尽管仍然需要按$index跟踪，但您不需要在逻辑中使用它，因为您有计数器列

ng-repeat="(col, t) in h.seats track by $index"

我有一个数组，我想把它转换成列大小为4的网格/矩阵。下面的实现对我有效。您可以在嵌套的ng repeat中使用两个计数器：行和列

<ul>
    <li ng-repeat="some in something">
        <span> index {{someCounter}} </span>
        <ul>
            <li ng-repeat="chid in some">
                <span> index {{someCounter}} </span>
            </li>
        </ul>
    </li>
</ul>

        <tbody>
            <tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
                <td>{{row+1}}</td>
                <td class="text-primary" ng-class="appliedClass(!t.status)"
                    ng-repeat="(col, t) in h.seats track by $index"
                    ng-if="col >= (row)*3 && col < (row+1)*3">
                        <span ng-show="t.status"> X </span> 
                        <span ng-show="!t.status"> - </span>
                </td>
            </tr>
        </tbody>

{{row+1}}
X
- 

---

有关计数器工作原理的详细信息，请访问

基本上，您需要进行顺序遍历，但使用ng repeat进行预顺序遍历，因此您需要在JS端进行处理。