Question

ng-repeat中的$ index应如何增加特定值？例如，在这个小提琴http://jsfiddle.net/Lvc0u55v/11811/中，需要一次显示两个值。所以下一次迭代应该以第三个值而不是第二个值开始。

<div ng-controller="MyCtrl">
  <div ng-repeat="text in arr">
   <span>{{arr[$index]}}</span> 
   <span>{{arr[$index+1]}}</span> 
  </div>
</div>

Answer 1

您可以使用控制器中的自定义函数执行此操作，该函数将数字从0返回到数组的长度，并跳过其间的所有其他值。

<强> Modified jsfiddle

在这里，我创建了一个名为$scope.range()的函数。

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

function MyCtrl($scope) {
    $scope.arr=['hi1','hi2','hi3','hi4','hi5','hi6','hi7'];

    $scope.range = function(max, step) {
        step = step || 1;
        var input = [];
        for (var i = 0; i <= max; i += step) {
            input.push(i);
        }
        return input;
    };
}

通过指定要使用的最大元素数和要跳过的元素数，在ng-repeat中使用此新函数。因此，要显示arr中的所有其他元素，您可以使用num in range(arr.length, 2)。

该函数将创建一个数组并将其返回到ng-repeat，如下所示：

[0, 2, 4, 6]

您的ng-repeat将重复四次（此阵列中的每个项目一次），对应四行。然后，两个<span>元素将使用当前值和后面的元素为您提供两列。

<div ng-controller="MyCtrl">
  <div ng-repeat="num in range(arr.length, 2)">
    <span>{{arr[num]}}</span> 
    <span>{{arr[num+1]}}</span> 
  </div>
</div>

我还修改了您的<span>元素以使用arr[num]和arr[num+1]，而不是使用$index。这提供了您正在寻找的结果。

当然，您可以将此修改为使用三列，只需将ng-repeat中的2更改为3，如下所示：<div ng-repeat="num in range(arr.length, 3)">

请参阅 updated jsfiddle 。

在ng-repeat中增加$ index

1 个答案: