在多个数组上使用 ng-repeat答案

【问题标题】：Using ng-repeat on multiple arrays在多个数组上使用 ng-repeat
【发布时间】：2015-03-21 13:50:17
【问题描述】：

我正在制作一个天气应用程序，但我一直坚持应该是一个简单的任务，但由于我是 Angular 的新手，所以我无法理解它是如何工作的。基本上我需要的是一次遍历两个数组并从这个数组中设置一些值。

理论上这是我想要完成的：

<div ng-repeat="city in cities" ng-repeat="temp in temperatures" id={{city.id}}>
    <span>{{temp}}</span>
</div>

但显然你不能像这样放置多个中继器。如果我在跨度上放置一个ng-repeat，我会得到 12 个跨度，但我只需要 1 个，我需要这个 1 来包含 temperatures 中的迭代的当前值。

使用 API 动态创建的数组如下所示：

城市：[object, object, object, object, object, object, object, object, object, object, object, object]

温度：[-2.3, -0.2, -1.2, -25.4, 2.9, -4.8, -2.2, -12.1, 0.3, -5.9, -7.7, -0.1]

我该怎么做？

【问题讨论】：

【解决方案1】：

你不能在一个 div 中使用两个 ng-repeat。

您需要另一种方法，请尝试此建议

<div ng-repeat="city in cities" id={{city.id}}>
    <span>{{temperatures[$index]}}</span>
</div>

---- 最佳实践

不要使用$index这是一种不好的做法，但在这种情况下你可以实现你想要的。

你可以这样做，

<div ng-repeat="city in cities">
    <span>City: {{city}} - Temperature: {{ getTemprature(city) }}</span>
</div>

在控制器中，

$scope.getTemprature = function(city) {
    var index = cities.indexOf(city);
    return temperatures[index];
}

因为如果你使用orderBy 和ng-repeat $index 不会像你假设的那样，$index 将得到有序数组$index 而不是实际数组$index。

【讨论】：

【解决方案2】：

使用索引（假设temperatures 是同一控制器中定义的温度数组）：

<div ng-repeat="city in cities">
    <span>City: {{city}} - Temperature: {{temperatures[$index]}}</span>
</div>

【讨论】：

【解决方案3】：

您可以使用lodash's zip function 完成此操作。试试这个：

控制器

$scope.combinedData = _.zip(cities, temperatures);

查看

<div ng-repeat="row in combinedData" id="{{row[0].id}}">
    <span><b>{{row[0].name}}</b> {{row[1]}}</span>
</div>

工作小提琴： http://jsfiddle.net/hojrhLx5/1/

【讨论】：