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

【问题标题】：ng-repeat based on key in JSON - AngularJSng-repeat 基于 JSON 中的键 - AngularJS
【发布时间】：2018-06-11 02:36:20
【问题描述】：

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

现在，我在 AngularJS Material 的卡片上使用 ng-repeat，并且想不出像 Google 跟踪代码管理器 那样实际填充 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" 在同一个md-card 中同时拥有"containers"

希望有人能帮助我，谢谢！

【问题讨论】：

你所做的是重构控制器中的数据，然后使用两个嵌套的ng-repeats。
这可以与 groupBy 一起使用吗？

标签： javascript php angularjs json

【解决方案1】：

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

这里

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

在视图文件中使用该地图

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

这会解决你的问题

【讨论】：

我没有使用 Typescript
你会使用 JavaScript 来与 ui 组件交互吗？
是的，如果我可以在控制器内部或视图上重建 JSON，那将是最好的，不能在后端执行此操作
是的@asim 我要你在控制器内部构建
@asim 不是将您将从后端收到的容器列表 JSON 发送到视图，只需构造一个对象并发送到视图

【解决方案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)，然后基于key(account_name) 使用groupBy

谢谢:)

【讨论】：