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

Question

我正在处理一个项目，我从 Google跟踪代码管理器API 填充一些JSON，并将此数据发送到AngularJS中编写的前端。

现在，我在 AngularJS Material 的卡片上使用ng-repeat，并且无法想到实际填充ng-repeat的方法，就像 Google跟踪代码管理器一样，我填充的方式是这样的：

<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个 A_place = 10km B_place=5km #A_place=2km C_place=1km

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

Answer 1

在component.ts文件中构造一个类似[string，array [＆＃34; string＆＃34;]]的地图。

这里

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

在视图文件中使用该地图，如

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

这可以解决您的问题

Answer 2

所以我用https://github.com/a8m/angular-filter#groupby

提供的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和key(account_name)

谢谢:)