admin管理员组文章数量:1327524
I'm making a weather application but I'm stuck on what should be a simple task but I can't wrap my head around how this works since I'm new to Angular. Basically what I need is to iterate over two arrays at once and set some values from this array.
In theory this is what I wanna acplish:
<div ng-repeat="city in cities" ng-repeat="temp in temperatures" id={{city.id}}>
<span>{{temp}}</span>
</div>
But obviously you can't put multiple repeaters like this. If I put an ng-repeat
on the span I get 12 spans but I only need 1 and I need this 1 to contain the current value of the iteration in the temperatures
.
The arrays looks like this after being created dynamically using an API:
Cities: [object, object, object, object, object, object, object, object, object, object, object, object]
Temperatures: [-2.3, -0.2, -1.2, -25.4, 2.9, -4.8, -2.2, -12.1, 0.3, -5.9, -7.7, -0.1]
How would I do this?
I'm making a weather application but I'm stuck on what should be a simple task but I can't wrap my head around how this works since I'm new to Angular. Basically what I need is to iterate over two arrays at once and set some values from this array.
In theory this is what I wanna acplish:
<div ng-repeat="city in cities" ng-repeat="temp in temperatures" id={{city.id}}>
<span>{{temp}}</span>
</div>
But obviously you can't put multiple repeaters like this. If I put an ng-repeat
on the span I get 12 spans but I only need 1 and I need this 1 to contain the current value of the iteration in the temperatures
.
The arrays looks like this after being created dynamically using an API:
Cities: [object, object, object, object, object, object, object, object, object, object, object, object]
Temperatures: [-2.3, -0.2, -1.2, -25.4, 2.9, -4.8, -2.2, -12.1, 0.3, -5.9, -7.7, -0.1]
How would I do this?
Share Improve this question asked Jan 22, 2015 at 16:55 ChrillewoodzChrillewoodz 28.4k23 gold badges99 silver badges186 bronze badges 2- Why so You have The date in different objects. Combine your data into one json object. This saves You a lot of hassel. – msohns Commented Jan 22, 2015 at 16:59
- @msohns I can't unfortunately that's why I'm struggling. – Chrillewoodz Commented Jan 22, 2015 at 16:59
3 Answers
Reset to default 3Use an index (assuming temperatures
is the array of temperatures defined in the same controller):
<div ng-repeat="city in cities">
<span>City: {{city}} - Temperature: {{temperatures[$index]}}</span>
</div>
you cant use two ng-repeat
in one div.
you need a alternative way of doing this, please try this suggestion
<div ng-repeat="city in cities" id={{city.id}}>
<span>{{temperatures[$index]}}</span>
</div>
---- for the best practice
don't use $index
its a bad practice but you can achieve what u want in this case.
you can do something like this,
<div ng-repeat="city in cities">
<span>City: {{city}} - Temperature: {{ getTemprature(city) }}</span>
</div>
in controller,
$scope.getTemprature = function(city) {
var index = cities.indexOf(city);
return temperatures[index];
}
because if you use orderBy
with the ng-repeat
$index
will not behave like u assume, $index
will get the ordered array $index
not the actual array $index
.
You can acplish this with lodash's zip
function. Try this:
Controller
$scope.binedData = _.zip(cities, temperatures);
View
<div ng-repeat="row in binedData" id="{{row[0].id}}">
<span><b>{{row[0].name}}</b> {{row[1]}}</span>
</div>
Working fiddle: http://jsfiddle/hojrhLx5/1/
本文标签: javascriptUsing ngrepeat on multiple arraysStack Overflow
版权声明:本文标题:javascript - Using ng-repeat on multiple arrays - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742187480a2429603.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论