Angular - table 中重复的倍数

Question

[编辑：已解决，但我认为有更好的方法，如果你找到了，我仍然感兴趣]

我有一份银行名单。每家银行都包含一个账户列表。每个帐户都包含一个操作列表。

我想在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 正确显示它，我想制作类似的东西：

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

但我知道打破 table > tr > td.

是不正确的

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

如果您知道如何解决这个问题，我很乐意听到您的解决方案。

Answer 1

这可以通过创建将 return 操作列表的自定义过滤器轻松实现。

过滤器

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

Working Plunkr这里

希望对您有所帮助，谢谢。

Answer 2

谢谢你拯救了我。

我改进了你的解决方案，因为 filterData 函数是运行两次（对于 $scope.banks 数组的每个元素）。

更喜欢 tr_ngrepeat 的 tbody 容器中的 ng-init。

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

Angular - table 中重复的倍数

Angular - multiple ng repeat in table

angularjs

angularjs-ng-repeat