基于JSON中的键的ng-repeat - AngularJS

Question

我正在开发一个项目，我从Google Tag Manager API填充一些JSON，并将此数据发送到AngularJS中编写的前端。

现在，我在AngularJS Material的卡上使用ng-repeat并且想不出像Google Tag Manager那样实际填充ng-repeat的方法，我填充的方式是这样的：

<div class='md-padding' layout="row" layout-wrap>
    <md-card flex="45" flex-sm="100" flex-md="100" flex-xs="100"
             ng-repeat="container in containers | toArray:false |  filter:container">

        <md-toolbar>
            <div class="md-toolbar-tools">
                <h1 class="md-display-3">{{container.account_name}}</h1>
            </div>
        </md-toolbar>
  <md-card-title>

(...) here comes some table code...

主要是ng-repeat"container in containers"

这给了我这个结果：

正如你可以看到ng-repeat为每个账户创建一张卡片，我想要的是，如果"container.accountId"相同，那么填充在同一个<md-card>内。

我想要的是这样:(忽略这不是卡上的相同结构，这是googletagmanager.com采取的）

正如你所看到的"Account2"在同一个"containers"里面都有md-card

希望有人可以帮助我，谢谢！

Answer 1

在component.ts文件中构造一个类似[string，array [“string”]]的映射。

这里

key =容器帐户名称值=具有相同容器帐户名称的容器对象列表

在视图文件中使用该地图

<md-card ng-repeat="mapobject of map" ..
// heading(mapobject.key)
// repeat using mapobject.value
</md-card>

这可以解决您的问题

Answer 2

所以我用qazxsw poi提供的group by过滤器解决了它

所以我用它像这样：

https://github.com/a8m/angular-filter#groupby

通过使用

<div class='md-padding' layout="row" layout-wrap>
    <md-card flex="45" flex-sm="100" flex-md="100" flex-xs="100"
             ng-repeat="(key, value) in containers | groupBy: 'account_name'">

然后(key,value)基于groupBy

谢谢 ：）