I have 2 collections of data from different controllers.
Data Collection 1 (Controller Name):
[{id:1,"name":"jakov"},...]
Data Collection 2 (Controller Nickname):
[{id:1, "nickname" : "jandric", "nameId" :1, "title" : "master"},...]
I send data from Controller Name using a service:
$http.get('names/').success(function(data) {
sharedService.broadcastItem(data);
});
In Controller Nickname, I handle the broadcasted data:
$scope.$on('handleBroadcast', function() {
$scope.names = sharedService.message;
});
The Controller Nickname also makes a GET request:
$http.get('nicknames/').success(function (data) {
$scope.nicknames = data;
});
I want to display nicknameId, nickname, name, and title in a simple table.
Something like this:
<div ng-controller="Nickname">
<table>
<tr>
<th>nicknameId</th>
<th>nickname</th>
<th>name</th>
<th>title</th>
</tr>
<tr ng-repeat="nick in nicknames">
<td>{{nick.id}}</td>
<td>{{nick.nickname}}</td>
<td ng-controller="Name">{{??????}}</td> //GET name request trigger
<td>{{nick.title}}</td>
</tr>
</table>
</div>
How can I retrieve the name associated with a certain nameId from the first collection while iterating through the second collection?
Please assist me :D
UPDATE
I was able to achieve it in HTML like this:
<div ng-controller="Nickname">
<table>
<tr>
<th>nicknameId</th>
<th>nickname</th>
<th>name</th>
<th>title</th>
</tr>
<tr ng-repeat="nick in nicknames">
<td>{{nick.id}}</td>
<td>{{nick.nickname}}</td>
<td ng-controller="Name">
<div ng-repeat="name in names">
<div ng-if="nick.nameId === name.id">
{{name.name}}
</div>
</div>
</td>
<td>{{nick.title}}</td>
</tr>
</table>
</div>
So I'm using nested loops. Is there a simpler solution?