角度-表中有多个ng重复 [英] Angular - multiple ng repeat in table

问题描述

我有银行清单. 每个银行都包含一个帐户列表. 每个帐户都包含一个操作列表.

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.

这是银行清单的样子:

$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}
                ]
            }
        ]
    }
];

为了在Angular中正确显示，我想做这样的事情:

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>

但是我知道打破表> tr> td是不正确的.

But i know it's not correct to break the table > tr > td.

经过一些研究，我认为我可能不得不使用ng-repeat-start，ng-repeat-end指令，但我不知道如何操作，我甚至不确定这是一件好事.

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.

推荐答案

这可以通过创建自定义过滤器来轻松实现，该过滤器将返回操作列表.

This can be easily achieved by creating custom filter that will return the list of operation.

过滤器

.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;
  }
});

标记

<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>

正在工作的Plunkr 在这里

希望这可以为您提供帮助，谢谢.

Hope this could help you, Thanks.

这篇关于角度-表中有多个ng重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！