在ng-repeat中增加$ index

Question

$ index如何ng-repeat增加特定值？例如,在这个小提琴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返回到数组的长度,并跳过其间的所有其他值.

修改了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.这提供了您正在寻找的结果.

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

请参阅更新的jsfiddle.