javascript - 是否可以 ng-repeat 以任意数字递增 $index ？

Question

我目前有一个模板:

        <div class="choice-pair" ng-repeat="choicePair in pastChoices track by $index" ng-init="p1Result = getP1Result(choicePair); choiceNum = $index + 1;">
            <div class="turn-count cell"><strong>{{choiceNum}}</strong></div>
            <div class="p1 cell" ng-class="{win: p1Result === 1, lose: p1Result === -1, draw: p1Result === 0}"><strong>{{choicePair[0]}}</strong></div>
            <div class="p2 cell" ng-class="{win: p1Result === -1, lose: p1Result === 1, draw: p1Result === 0}"><strong>{{choicePair[1]}}</strong></div>
        </div>

pastChoices 是一个包含长度为 2 的子数组的数组，例如:

[['A', 'B'],['B', 'C'],['A', 'A'],['C', 'A']]

但由于需要更改服务器上的数据存储类型，我不得不展平此结构，以便 PastChoices 现在内联:

['A', 'B', 'B', 'C', 'A', 'A', 'C', 'A']

我是否可以对模板进行一些小更改，使其通过增加 2 来迭代新的 PastChoices 格式，这样我就可以选择如下选项对:

        <div class="choice-pair" ng-repeat="choices in pastChoices track by $index" ng-init="p1Result = getP1Result(pastChoices[$index], pastChoices[$index + 1]);">
            <div class="turn-count cell"><strong>{{$index + 1}}</strong></div>
            <div class="p1 cell" ng-class="{win: p1Result === 1, lose: p1Result === -1, draw: p1Result === 0}"><strong>{{pastChoices[$index]}}</strong></div>
            <div class="p2 cell" ng-class="{win: p1Result === -1, lose: p1Result === 1, draw: p1Result === 0}"><strong>{{pastChoices[$index + 1]}}</strong></div>
        </div>

这看起来会得到我想要的数据，除了它会迭代过去的选择数组的每个元素，因为我希望它有效地跳过奇数元素。

Answer 1

由于您没有使用选择，因此您可以将结果数量限制为 ng-repeat 中总数的一半:

<div class="choice-pair" ng-repeat="choices in (pastChoices | limitTo: pastChoices.length / 2 ) track by $index ">
    <div class="turn-count cell"><strong>{{($index * 2) + 1}}</strong></div>
    <div class="p1 cell" ng-class="{win: p1Result === 1, lose: p1Result === -1, draw: p1Result === 0}"><strong>{{pastChoices[($index * 2)]}}</strong></div>
    <div class="p2 cell" ng-class="{win: p1Result === -1, lose: p1Result === 1, draw: p1Result === 0}"><strong>{{pastChoices[($index * 2) + 1]}}</strong></div>
</div>

https://docs.angularjs.org/api/ng/filter/limitTo

如果你的数组长度不是偶数，这显然会失败。