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

问题描述

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

我想在一个表中显示所有操作.

这是银行列表的样子:

$scope.banks = [{编号:1，名称:'bank_1',帐户:[{编号:1，名称:'account_1',操作: [{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}]},{编号:2，名称:'account_2',操作: [{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}]}]},{编号:2，名称:'bank_2'，帐户:[{编号:3，name: 'account_3',操作: [{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}]},{编号:4，名称:'account_4',操作: [{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 正确显示，我想做这样的事情:

<tr><th>宴会</th><第>帐户</th><th>ID OP</th><th>姓名</th><th>价格</th></tr><div ng-repeat="银行中的银行"><div ng-repeat="bank.accounts 中的账户"><div ng-repeat="操作在 account.operations"><tr><td>{{banque.name}}</td><td>{{account.name}}</td><td>{{operation.id}}</td><td>{{operation.name}}</td><td>{{operation.price}}</td></tr>

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

经过一些研究，我认为我可能必须使用 ng-repeat-start、ng-repeat-end 指令，但我不明白如何使用，我什至不确定这是好事.

>

如果您知道如何解决这个问题，我很高兴听到您的解决方案.

解决方案

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

过滤

.filter('filterData', function(){返回函数(数据，firstParam，secondParam){var returnData = [];angular.forEach(数据，函数(值，索引){angular.forEach(value[firstParam], function(val, ind){angular.forEach(val[secondParam], function(v, i){returnData.push(v)});});});返回返回数据；}});

标记

<tr><th>ID</th><th>姓名</th><th>价格</th></tr><tr ng-repeat="银行操作| filterData: 'accounts': 'operations'"><td>{{operation.id}}</td><td>{{operation.name}}</td><td>{{operation.price}}</td></tr>

工作 Plunkr 在这里

希望能帮到你，谢谢.

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

解决方案

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.

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