Angular - multiple ng repeat in table - angularjs

Question

[EDIT : Solved but i think there's a better way, if you find it, i'm still interested]
I have a list of banks.
Each bank contains a list of accounts.
Each accounts contains a list of operations.
I would like to display all the operations in a table.
Here's what the bank list looks like :
$scope.banks = [
{
id: 1,
name: 'bank_1',
accounts: [
{
id: 1,
name: 'account_1',
operations: [
{id: 1, name:'operation_1', price:100},
{id: 2, name:'operation_2', price:200},
{id: 3, name:'operation_3', price:300},
{id: 4, name:'operation_4', price:400}
]
},
{
id: 2,
name: 'account_2',
operations: [
{id: 5, name:'operation_5', price:100},
{id: 6, name:'operation_6', price:200},
{id: 7, name:'operation_7', price:300},
{id: 8, name:'operation_8', price:400}
]
}
]
},
{
id: 2,
name: 'bank_2',
accounts: [
{
id: 3,
name: 'account_3',
operations: [
{id: 9, name:'operation_9', price:100},
{id: 10, name:'operation_10', price:200},
{id: 11, name:'operation_11', price:300},
{id: 12, name:'operation_12', price:400}
]
},
{
id: 4,
name: 'account_4',
operations: [
{id: 13, name:'operation_13', price:100},
{id: 14, name:'operation_14', price:200},
{id: 15, name:'operation_15', price:300},
{id: 16, name:'operation_16', price:400}
]
}
]
}
];
In order to display that properly with Angular i wanted to make something like that :
<table>
<tr>
<th>Banque</th>
<th>Account</th>
<th>ID OP</th>
<th>Name</th>
<th>Price</th>
</tr>
<div ng-repeat="bank in banks">
<div ng-repeat="account in bank.accounts">
<div ng-repeat="operation in account.operations">
<tr>
<td>{{banque.name}}</td>
<td>{{account.name}}</td>
<td>{{operation.id}}</td>
<td>{{operation.name}}</td>
<td>{{operation.price}}</td>
</tr>
</div>
</div>
</div>
</table>
But i know it's not correct to break the table > tr > td.
After some researches, i think i may have to use the ng-repeat-start, ng-repeat-end directive but i don't understand how and i'm not even sure it's the good thing to do.
If you have any idea how to solve that i'd be glad to hear your solution.

Answer 1

This can be easily achieved by creating custom filter that will return the list of operation.
Filter
.filter('filterData', function(){
return function(data, firstParam, secondParam){
var returnData = [];
angular.forEach(data, function(value, index){
angular.forEach(value[firstParam], function(val, ind){
angular.forEach(val[secondParam], function(v, i){
returnData.push(v)
});
});
});
return returnData;
}
});
Markup
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
<tr ng-repeat="operation in banks| filterData: 'accounts': 'operations'">
<td>{{operation.id}}</td>
<td>{{operation.name}}</td>
<td>{{operation.price}}</td>
</tr>
</table>
Working Plunkr Here
Hope this could help you, Thanks.

Answer 2

Thx you saved my day.
I enhance your solution because filterData function is running twice (for each element of $scope.banks array).
Prefers ng-init in tbody container of tr_ngrepeat.
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody ng-init="operationlist=(banks|filterData: 'accounts': 'operations')">
<tr ng-repeat="operation in operationlist">
<td>{{operation.id}}</td>
<td>{{operation.name}}</td>
<td>{{operation.price}}</td>
</tr>
</tbody>
</table>