如何使用过滤器对数组中的对象进行分组

How group objects in array from ng-repeat with filter?

本文关键字：对象 何使用 过滤器 数组      更新时间：2023-09-26

如何使用过滤器对 ng-repeating 数组中的对象进行分组？

我有一个带有对象的数组，我想按其国家/地区对此对象进行分组。

示例：我想要这个结果：

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>

我创建了Plunker.请检查一下。

我用过角度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>

更新的网页

<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>

更新的普伦克

您在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>

代码

中的一点更正，它工作正常

<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>

这是一个小提琴工作

相关文章：