1

私はAngularJsの初心者です。for(i=0; i < ele.length; i+=2) として ng-repeat を使用したい

ng-repeat を使用する 4 列のテーブルがあります

<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>

1回の反復で2つの要素にアクセスする必要があり、反復の増分は2にする必要があります

これが理にかなっていることを願っています。私を助けてください。

このhtmlビューを確認してくださいプランカー

4

3 に答える 3

4

配列の均等なコピーを作成するフィルターを作成できます。

.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/

于 2013-02-27T16:28:58.240 に答える
1

したがって、私が正しく理解している場合は、リストをたどり、反復中に 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>

プランカーはこちら

于 2013-02-27T14:28:55.487 に答える
0

私が考えることができる1つの解決策は、データモデルの変更を伴います

テンプレート

<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;

}]);

デモ:フィドル

別のわずかに異なるアプローチは、こちらにあります。

于 2013-02-27T15:28:32.497 に答える