How do I use ng-repeat over multiple arrays of objects?
Question
So i have these 2 arrays of objects. I want to use ng-repeat so it prints the elements from countOfServicesCodesByElements at the same index as date. So for date start: "09. 09. 2016", end: "13. 09. 2016" it should output 23, and so on.
$scope.countOfServicesCodesParts = [ {
start: "09. 09. 2016",
end: "13. 09. 2016"
},
{
start: "15. 09. 2016",
end: "18. 09. 2016"
},
{
start: "27. 09. 2016",
end: "30. 09. 2016"
}
]
$scope.countOfServicesCodesByElements = [{
"count": 23
},
{
"count": 30
},
{
"count": 20
},
{
"count": 2
}
]
this is my html file
<div class="card-content" ng-if="countOfServicesCodesEval != 0" ng-repeat="date in countOfServicesCodesParts" >
<table class="table table-striped">
<tr >
<span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
date start {{date.start}} date end: {{date.end}}
</span>
</tr>
<div >
<tr >
<td class="col-md-2"><span ng-if="countOfServicesCodes != 0" > number:</span></td>
<td class="col-md-2"><text class="text-info">{{countOfServicesCodesByElements.count}}</text></td>
</tr>
</div>
</table>
</div>
5 answers
solution1
2 ACCPTED 2016-12-07 11:41:28
ngRepeat offers several properties, one being $index . You could use such property while looping through the first array to print the desired values of the second array. Something like this:
<li ng-repeat="arr1 in countOfServicesCodesParts">
<span>{{countOfServicesCodesByElements[$index].count}}</span>
</li>
Keep in mind that this would ideally work with arrays of the same length!
solution2
1 2016-12-07 11:45:44
hoping that the below is your requirement...but you need to make sure that data in $scope.countOfServicesCodesByElements is properly indexed for the values in $scope.countOfServicesCodesParts
<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link rel="stylesheet" href="style.css" /> <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script> <script src="script.js"></script> </head> <body ng-controller="MainCtrl"> <div class="card-content" ng-if="countOfServicesCodesEval != 0" ng-repeat="date in countOfServicesCodesParts" > <table class="table table-striped"> <tr > <span span ng-if="countOfServicesCodes != 0" style="font-weight:bold"> date start {{date.start}} date end: {{date.end}} </span> </tr> <div > <tr > <td class="col-md-2"><span ng-if="countOfServicesCodes != 0" > number:</span></td> <td class="col-md-2"><text class="text-info">{{days($index)}}</text></td> </tr> </div> </table> </div> </body> <script> var app = angular.module('plunker', []); app.controller('MainCtrl', function($scope) { $scope.countOfServicesCodesParts = [ { start: "09. 09. 2016", end: "13. 09. 2016" }, { start: "15. 09. 2016", end: "18. 09. 2016" }, { start: "27. 09. 2016", end: "30. 09. 2016" } ] $scope.countOfServicesCodesByElements = [{ "count": 23 }, { "count": 30 }, { "count": 20 }, { "count": 2 } ]; $scope.days=function(x){ return $scope.countOfServicesCodesByElements[x].count; } }); </script> </html>
solution3
0 2016-12-07 11:54:26
Try this:
<div class="card-content" ng-if="countOfServicesCodesEval != 0" ng-repeat="date in countOfServicesCodesParts track by $index" >
<table class="table table-striped">
<tr >
<span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
date start {{date.start}} date end: {{date.end}}
</span>
</tr>
<div >
<tr >
<td class="col-md-2"><span ng-if="countOfServicesCodes != 0" > number:</span></td>
<td class="col-md-2"><text class="text-info">{{countOfServicesCodesByElements[$index].count}}</text></td>
</tr>
</div>
</table>
$index is iterator offset of the repeated element.
solution4
0 2016-12-07 12:11:10
<ul>
<li ng-repeat="(index, key) in countOfServicesCodesParts">
<span>Start Date: {{ key.start_date}}</span>
<span>Count: {{ countOfServicesCodesByElements[index].count}}</span>
</li>
</ul>
solution5
0 2016-12-07 12:15:01
Try this one.
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="card-content" ng-if="countOfServicesCodesEval != 0">
<table class="table table-striped">
<tr ng-repeat="date in countOfServicesCodesParts">
<td> <span span ng-if="countOfServicesCodes != 0" style="font-weight:bold">
date start {{date.start}} date end: {{date.end}}
number: {{countOfServicesCodesByElements[$index].count}}
</span>
</td>
</tr>
</table>
</div>
</div>
</body>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.countOfServicesCodesParts = [{
start: "09. 09. 2016",
end: "13. 09. 2016"
}, {
start: "15. 09. 2016",
end: "18. 09. 2016"
}, {
start: "27. 09. 2016",
end: "30. 09. 2016"
}]
$scope.countOfServicesCodesByElements = [{
count: 23
}, {
count: 30
}, {
count: 20
}, {
count: 2
}]
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do i iterate over array of json objects using ng-repeat in angular js?
How do I use ng-repeat and filter properties over an array?
How do I access all objects with ng-repeat
How to use ng-repeat in array of objects?
Use ng-repeat for 2 arrays
How do I use a scope variable in ng-repeat filter?
AngularJs: how to do ng-repeat over multiple variables like ng-init can do?
In Angular.js, how do I modify the properties of an element in a list of objects iterated over with ng-repeat on click?
How to correctly loop / ng-repeat through nested objects/arrays?
How to assign arrays of objects by key in ng-repeat?
Related Tags