Question

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

我有一个包含对象的数组，我希望他们的国家能够按照这个对象进行分组。

示例：我希望得到这样的结果：

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

country scope和object ng-repeat中有相同的对象object。将country更改为item.country

检查angular-filter

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 请检查一下。

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

更新了Plunker

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>

这是一个fiddle工作

如何在ng-repeat中使用过滤器对数组进行分组？

3 个答案: