[英]How group objects in array from ng-repeat with filter?
如何通过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>
您在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>
我已经创建了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>
更新的柱塞
在您的代码中进行一些更正,效果很好
<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>
这是一件小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.