单个元素上的多个 ng-repeat答案

【问题标题】：Multiple ng-repeat on single element单个元素上的多个 ng-repeat
【发布时间】：2017-09-02 23:15:12
【问题描述】：

有没有可能实现这样的代码：-

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

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

谢谢

喜欢：-“http://jsfiddle.net/6ob5bkcx/1/”

【问题讨论】：

即使使用 jsFiddle，我也不清楚在这种情况下所需的输出是什么。你能发布（在这里，而不是在 jsFiddle）一些示例输出 HTML 和一些示例输入数组吗？

标签： angularjs angularjs-ng-repeat

【解决方案1】：

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

控制器：

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>

【讨论】：

数组大小不同会怎样？
我建议将数据放在一个对象中。喜欢：this.obj = [{data: 'a', value :true}, {data: 'b', value:true}];

【解决方案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>

【讨论】：

我要求两个不同的数组而不是具有多个对象的单个数组:-)
您可以随时将它们合并到一个字典中（在您的控制器中）。您的上述链接无法正常工作的任何方式

【解决方案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>

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

【讨论】：

那么有什么替代方案吗..？？
不，您必须根据需要编写自定义指令，Angular 允许您这样做。
查看上述代码的更新部分。它将帮助您处理您的情况。

【解决方案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>

希望能有所帮助。

【讨论】：

【解决方案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"]
]

【讨论】：