单个元素上的多次ng重复

时间:2015-01-12 12:14:51

标签: angularjs angularjs-ng-repeat

这可以实现这样的代码: -

<tr ng-repeat="data in dataArray,value in valueArray">
       {{data}} {{value}}
 </tr>

我有两个数组,我想以单行显示它们 PS:我不是要求语法。我正在寻找实现这个目标的逻辑

由于

喜欢: - &#34; http://jsfiddle.net/6ob5bkcx/1/&#34;

5 个答案:

答案 0 :(得分:15)

您应该在控制器中执行此操作,而不是在视图中执行此操作。将dataValues映射到键/值对对象,并使用索引引用values数组。这假设每个数据键都有一个对应的值键。

<强>控制器:

var dataArray = [];
var valueArray = [];
this.repeatData = dataArray.map(function(value, index) {
    return {
        data: value,
        value: valueArray[index]
    }
});

查看:

<tr ng-repeat="data in repeatData">
    {{data.data}} {{data.value}}
</tr>

答案 1 :(得分:3)

这是否适合您的需要

http://jsfiddle.net/jmo65wyn/

您的数据,值数组作为对象数组

 this.obj = [{data: 'a', value :true}, {data: 'b', value:true}];

你像这样循环

 <div ng:repeat="o in obj">
       {{o.data}} and {{o.value}} 
         <input type="checkbox" ng:model="o.value">
    </div>

答案 2 :(得分:2)

Angular ng-repeat不支持它,但您仍然可以根据自己的要求编写自己的自定义指令。

更新部分

var traverseCollection = angular.module("CollectionTraverse", []);

traverseCollection.directive("repeatCollection", function(){

    return {
        restrict: "A",
        scope: {
            model: "="
        },
        controller: controller: function($scope) {
            var collectionList = $scope.model;

            angular.forEach(collectionList, function(obj, index) {
                angular.forEach(obj, function(data, index) {

                });
            });
        }
    }
});

Your scope should contains the list of your collection objects : $scope.collectionList = [dataArray, valueArray];

Usage in HTML:
-------------------------------------------
<div repeat_collection model="collectionList"></div>

这个指令对于遍历集合列表是通用的,在上面的代码中可以有一些语法错误,因为我没有运行它。这是你的运气。

答案 3 :(得分:1)

如果您出于任何原因,有两个长度相同且内容相对应的数组(array1[0]对应array2[0],...,array1[n]对应{{ 1}}),您可以使用AngularJS&#39; s track by(在版本1.1.4中第一次引入),例如:

&#13;
&#13;
array2[n]
&#13;
&#13;
&#13;

希望可以提供帮助。

答案 4 :(得分:-1)

如果您想要同一行中包含两个或更多项目的列表:

在html文件中:

<li ng-repeat="item in items">
<i class="material-icons">{{navItem[1]}}</i>{{navItem[0]}}</li>

在js文件中:

$scope.items = [
    ["Home", "home"],
    ["Favorite", "favorite"]
]