angularjs - AngularJs ng-repeat 改变循环增量

Question

我是 AngularJs 的新手。我想使用 ng-repeat 作为 for(i=0; i < ele.length; i+=2)

我有一个有 4 列的表，我将在其中使用 ng-repeat

<table>
<tr ng-repeat="i in elements">
   <th>{{i.T}}</th>
   <td>{{i.V}}</td>
   <th>{{elements[($index+1)].T}}</th> <!-- This should be next element of the elements array -->
   <td>{{elements[($index+1)].V}}</td> <!-- This should be next element of the elements array -->
</tr>
</table>

我需要在一次迭代中访问 2 个元素，迭代增量应该是 2

我希望这是有道理的。请帮我。

请检查这个 html 视图Plunker

Answer 1

您可以创建一个过滤器来创建数组的偶数副本：

.filter("myFilter", function(){
    return function(input, test){
        var newArray = [];
        for(var x = 0; x < input.length; x+=2){
             newArray.push(input[x]);   
        }
        return newArray;
    }
});

JsFiddle：http: //jsfiddle.net/gwfPh/15/

Answer 2

因此，如果我理解正确，您想要遍历您的列表并在迭代时交替使用 th 和 td。如果是这样，您可以使用 ng-switch：

<table>
  <tr ng-repeat="i in elements" ng-switch on="$index % 2">
    <th ng-switch-when="0">{{i.T}}</th> 
    <td ng-switch-when="1">{{i.V}}</td>    
  </tr>
</table>

在此处查看 Plunker

Answer 3

我能想到的一种解决方案是改变数据模型

模板

<table ng-app="test-app" ng-controller="TestCtrl">
<tr ng-repeat="i in items">

   <th>{{i.T1}}</th>
   <td>{{i.V1}}</td>
   <th>{{i.T2}}</th>
   <td>{{i.V2}}</td>
</tr>
</table>

控制器

testApp.controller('TestCtrl', ['$scope', function($scope) {
    var elements=[]; //This is the dynamic values loaded from server
    for (var i = 0; i < 5; i++) {
        elements.push({
            T : i,
            V : 'v' + i
        });
    }

    //A converter which convert the data elements to a format we can use
    var items = [];
    var x = Math.ceil(elements.length / 2);
    for (var i = 0; i < x; i++) {
        var index = i * 2;
        var obj = {
            T1 : elements[index].T,
            V1 : elements[index].V
        }
        if (elements[index + 1]) {
            obj.T2 = elements[index + 1].T;
            obj.V2 = elements[index + 1].V
        }
        items.push(obj)
    }

    $scope.items = items;

}]);

演示：小提琴

可以在此处找到另一种略有不同的方法。