单个元素上多个ng-repeat

Question

这个代码是否可以实现：-

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

我有两个数组，我希望将它们显示在同一行上。 PS：我不是在问语法，我是在寻找实现它的逻辑。

谢谢

例如: "http://jsfiddle.net/6ob5bkcx/1/"

- squiroid

---

即使有jsFiddle，我仍然不清楚在这种情况下所需的输出是什么。你能否在此处发布一些示例输出HTML和一些示例输入数组（而不是在jsFiddle中）？ - CodingIntrigue

Answer 1

您应该在控制器中完成这个操作，而不是在视图中。将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>

- CodingIntrigue

---

数组大小不同时会发生什么？ - Progs

我建议将数据放在一个对象中，例如： this.obj = [{data: 'a', value :true}, {data: 'b', value:true}]; - Sabba Keynejad

Answer 2

这符合您的需求吗？

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>

- Anand

---

我要求的是两个不同的数组，而不是一个包含多个对象的单一数组 :-) - squiroid

你可以将它们组合成一个字典（在你的控制器中）。无论如何，你上面的链接不起作用。 - Anand

Answer 3

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>

此指令将通用于遍历集合列表，并且在上面的代码中可能存在一些语法错误，因为我没有运行它。这是你的运气。

- Suneet Bansal

---

那么有没有其他的替代方案呢..?? - squiroid

不，您将需要根据自己的需求编写自定义指令，Angular允许您这样做。 - Suneet Bansal

请查看上述代码的更新部分。它将帮助您处理您的情况。 - Suneet Bansal

Answer 4

如果您因为任何原因拥有两个长度相同且内容对应的数组（array1[0] 对应 array2[0]，..., array1[n] 对应 array2[n]），您可以像以下示例一样使用 AngularJS 的 track by（该功能在版本 1.1.4 中首次引入）来进行操作：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>

<table ng-app="" ng-init="names=['Bill','Billa','Billy']; ages=['10', '20', '30']">
  <tr ng-repeat="name in names track by $index">
    <td>{{ name }} is {{ ages[$index] }} years old.</td>
  </tr>
</table>

希望能够帮助。

- akmozo

Answer 5

如果你想要像列表一样在同一行中显示两个或更多的项目：

在HTML文件中：

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

在js文件中：

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

- Cristianjz91