Angular ng-repeat每次迭代迭代多个项目

时间:2015-06-27 23:57:36

标签: javascript angularjs

我的控制器里有一本字典:

thing = {    

    key1 = value1,

    key2 = value2,

    ...

    keyN = valueN,

};

我正在使用ng-repeat来迭代它:ng-repeat="(key, value) in thing"

但我希望一次迭代多个值,这样每次迭代我都可以使用key1: value1key2: value2,然后我可以使用key3: value3,{{ 1}}等...

有没有办法迭代ng-repeat,一次迭代多个项目? 感谢。

3 个答案:

答案 0 :(得分:2)

不会改变您的模型结构或使用其他结构。我的意思是后者是,您可以使用键名创建一个数组,如下所示:

$scope.doubled = [['key1', 'key2'], ['key3', 'key4'], ... ];

然后迭代非常简单,例如:

<div ng-repeat="keys in doubled">
    <div ng-repeat="key in keys">
        {{ thing[key] }}
    </div>
</div>

这也是一种以可预测的方式进行迭代的更可靠的方式,因为你应该介意在迭代对象的属性时,你不能(或者至少不应该 t)依赖于这些属性的特定顺序(请参阅https://github.com/angular/angular.js/issues/6210)。

答案 1 :(得分:0)

我建议创建一个过滤器:

app.filter('coupledItems', function(){
        return function(items){

            var isEven = false;
            var coupledItems = [];
            var temp = {};
            angular.forEach(items, function(item){

                if(isEven){
                    temp['item2'] = item;
                    coupledItems.push(temp);
                    temp = {};
                }
                else{
                    temp['item1'] = item;
                }

                isEven = !isEven;
            });

            if(temp['item1']){ // If odd, put it to last item
                coupledItems.push(temp)
            }

            return coupledItems;
        }
    });

使用时:

<tr ng-repeat="item in items | coupledItems">
    <td>{{item.item1.key}}</td>
    <td>{{item.item2.key}}</td>
</tr>

答案 2 :(得分:-1)

是。 示例:

ng-repeat="t in thing"

{{ t[$index] + t[$index+1] }}