How group objects in array from ng-repeat with filter?
Question
How group objects in array from ng-repeat with filter ?
I have an array with objects, and I would like group by this objects by their countries.
Sample : I would like to have this result :
Free : Australia, India, United States
Pay : Australia
Not Pay : Australia, India
from :
$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"
}
}
]
I tried this with the code :
<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>
Solved :
I use angular 1.4.9 and angular-filter 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>
3 answers
solution1
2 2016-01-28 10:14:36
you have same object country in scope object and in ng-repeat object . Change country to item.country
Check 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>
solution2
2 ACCPTED 2016-01-28 10:30:21
I have created Plunker .Please check it.
I have used angular 1.2.20 and angular-filter.min.js
I have not changes any part of HTML and JS. It's working fine for me.
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>
UPDATED 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>
Updated Plunker
solution3
1 2016-01-28 10:54:50
a little correction in your code and it works fine
<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>
here is a fiddle working
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.