如何分组ng-repeat子文档?

时间:2016-02-03 04:48:04

标签: javascript angularjs json angularjs-ng-repeat

我正在使用AngularJS,我有SubDocuments,我的JSON如下所示。我想知道如何对我的子文档进行分组(orderfood内的列表)。我的plunker link。我现在得到的结果是。

Isnain Meals

Chicken Burger

Chicken Burger

但我希望我的结果像这样

Isnain Meals

Chicken Burger(2)

JSON数据

$scope.lists = [
{
  "_id": "56b0c315e179bb0e00a44dbf",
  "orderfood": [
    {
      "_id": "569d865bff1fe20e00f8ba97",
      "qty": "1",
      "confirm": true,
      "price": 154,
      "name": "Isnain Meals"
    }
  ],
  "content": "9176649143",
  "created": "2016-02-02T14:54:13.926Z"
},
{
  "_id": "56b06ed25b53250e00ccbd73",
  "orderfood": [
    {
      "_id": "569d84f04834c10e003dff36",
      "qty": "1",
      "confirm": true,
      "price": 125,
      "name": "Chicken Burger"
    }
  ],
  "content": "6886058585",
  "created": "2016-02-02T08:54:42.986Z"
},
{
  "_id": "56b06ed25b53250e00ccbd74",
  "orderfood": [
    {
      "_id": "569d84f04834c10e003dff37",
      "qty": "1",
      "confirm": true,
      "price": 125,
      "name": "Chicken Burger"
    }
  ],
  "content": "6886058585",
  "created": "2016-02-02T08:54:42.986Z"
}];

我的plunker link

2 个答案:

答案 0 :(得分:0)

您可以使用过滤器“groupBy”

<div ng-repeat="(key, value) in lists | groupBy: 'name'">
   {{key}} ({{value.length}})
</div>

value是分组数据的列表。

查看相关问题: How can I group data with an Angular filter?

答案 1 :(得分:0)

我使用lodash对子文档进行分组

$scope.groupedByFoodName = _.chain($scope.lists).map(function(each) {
  return each.orderfood
}).flatten().groupBy(function(each) {
  return each.name
}).value();

demo