如何使用過濾器從ng-repeat對數組中的對象進行分組？

Question

如何通過ng-repeat和filter將數組中的對象分組？

我有一個包含對象的數組，我想按對象所在的國家/地區對這些對象進行分組。

樣本：我想要這個結果：

Free : Australia, India, United States  
Pay : Australia
Not Pay : Australia, India

來自：

$scope.lists = [{
    "id": 1
    "field": [
        {
            country: "Australia",
            type: "Free"
        },
        {
            country: "Australia",
            type: "Pay"
        },
        {
            country: "Australia",
            type: "Not Pay"
        },
        {
            country: "India",
            type: "Free"
        },
        {
            country: "India",
            type: "Not Pay"
        },
        {
            country: "United States",
            type: "free"
        },
    },
    {
    "id": 2
    "field": [
        {
            country: "Australia",
            type: "Pay"
        },
        {
            country: "India",
            type: "Free"
        },
        {
            country: "India",
            type: "Not Pay"
        }
    }
]

我嘗試使用代碼：

<div ng-repeat="list in lists">

    <ul ng-repeat="(key, value) in list.field | groupBy: 'type'">
      {{ key }}
      <li ng-repeat="country in value">
        : {{ country }} 
      </li>
    </ul>

</div>

解決了：

我使用角度1.4.9和角度濾鏡0.5.7

<div ng-repeat="list in lists">

    <ul ng-repeat="(key, value) in list.field | groupBy: 'type'">
      {{ key }}
      <li ng-repeat="item in value">
        : {{ item.country }} 
      </li>
    </ul>

</div>

Answer 1

您在scope object和ng-repeat object具有相同的對象country 。 將country更改為item.country

檢查角度過濾器

 var app = angular.module('app', ['angular.filter']); app.controller('MainController', function($scope) { var field = [{ "id": 1, "field": [ { country: "Australia", type: "Free" }, { country: "Australia", type: "Pay" }, { country: "Australia", type: "Not Pay" }, { country: "India", type: "Free" }, { country: "India", type: "Not Pay" }, { country: "United States", type: "Free" }, ], }, { "id": 2, "field": [ { country: "Australia", type: "Free1" }, { country: "Australia", type: "Pay1" }, { country: "Australia", type: "Not Pay1" }, { country: "India", type: "Free1" }, { country: "India", type: "Not Pay1" }, { country: "United States", type: "Free1" }, ], } ]; $scope.lists = field; })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script> <div ng-app="app" ng-controller="MainController"> <div ng-repeat="list in lists"> <ul ng-repeat="(key, value) in list.field | groupBy: 'type'"> {{ key }} <li ng-repeat="item in value"> : {{ item.country }} </li> </ul> </div> </div>

Answer 2

我已經創建了Plunker 。請檢查一下。

我已經使用了angular 1.2.20和angular-filter.min.js

我沒有更改HTML和JS的任何部分。 對我來說很好。

JS：

var app = angular.module('app', ['angular.filter']);

    app.controller('MainController', function($scope) {

      $scope.lists = [{
        "id": 1,
        "field": [
            {
                country: "Australia",
                type: "Free"
            },
            {
                country: "Australia",
                type: "Pay"
            },
            {
                country: "Australia",
                type: "Not Pay"
            },
            {
                country: "India",
                type: "Free"
            },
            {
                country: "India",
                type: "Not Pay"
            },
            {
                country: "United States",
                type: "Free"
            },
      ],
        },
    ]

    });

HTML：

 <body ng-controller="MainController">

     <ul ng-repeat="(key, value) in lists[0].field | groupBy: 'type'">
  {{ key }}
  <li ng-repeat="country in value">
    : {{ country }} 
  </li>
</ul>
  </body>

HTML更新

<div ng-repeat="list in lists">
     <ul ng-repeat="(key, value) in list.field | groupBy: 'type'">
  {{ key }}
  <li ng-repeat="country in value">
    : {{ country }} 
  </li>
</ul>
</div>

更新的柱塞

Answer 3

在您的代碼中進行一些更正，效果很好

<div ng-app="myApp" ng-controller="myCountries">

<ul ng-repeat="(key, value) in field | groupBy: 'type'">
  {{ key }}
  <li ng-repeat="bundle in value">
    : {{ bundle.country }} 
  </li>
</ul>

這是一件小提琴

如何使用過濾器從ng-repeat對數組中的對象進行分組？

問題描述

3 個解決方案

解決方案1
2 2016-01-28 10:14:36

解決方案2
2 已采納 2016-01-28 10:30:21

解決方案3
1 2016-01-28 10:54:50

如何使用過濾器從ng-repeat對數組中的對象進行分組？

問題描述

3 個解決方案

解決方案1 2 2016-01-28 10:14:36

解決方案2 2 已采納 2016-01-28 10:30:21

解決方案3 1 2016-01-28 10:54:50

解決方案1
2 2016-01-28 10:14:36

解決方案2
2 已采納 2016-01-28 10:30:21

解決方案3
1 2016-01-28 10:54:50