CARVIEW |
Select Language
HTTP/2 200
date: Sun, 27 Jul 2025 11:32:09 GMT
content-type: text/html; charset=utf-8
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With,Accept-Encoding, Accept, X-Requested-With
x-robots-tag: none
etag: W/"1a42253c90f64e5d415d7035a5768044"
cache-control: max-age=0, private, must-revalidate
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-frame-options: deny
x-content-type-options: nosniff
x-xss-protection: 0
referrer-policy: no-referrer-when-downgrade
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=T7YTKzEH6Vn9rlfAHcWsrPGX62%2BRDUQP7eB1VEl01xVrdk06lbgpDQzXaiwLv%2FZLVb3i70YbmSjPVoM63Yd%2B9%2Fq31TX2u6qUOpC4m8TJxHKCn9yku4Wc5r5scFn1rVKzb%2BSCCyGrz3BSrWGOJs5muI%2BagT%2Fn1wOj1QFShQd5yEizKa2ujRQLNPniVlqeul5LfnftI6gs0%2BSLILTXz65rFiS%2BV0kTUC%2B%2F4uUjRYNCevcbUPo%2BbqjbC%2FVyy3nG86Hr6Yt7N1tnoNiI9gA%2FICLKcQ%3D%3D--r21ILQFCjHXCC3AE--2xxNLaE%2BrNQMvhTJ4O5oXQ%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.1903595126.1753615929; Path=/; Domain=github.com; Expires=Mon, 27 Jul 2026 11:32:09 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Mon, 27 Jul 2026 11:32:09 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: CD86:3C6DB4:44DDCB:5C5115:68860E39
Common Questions · a8m/angular-filter Wiki · GitHub
Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 329
Common Questions
Ilya edited this page Sep 5, 2017
·
1 revision
- How to use orderBy with groupBy ?
- How to filter (key, value) with ng-repeat ?
- How can I inject specific filter to controller / service ?
- How can I extend or override existing filters ?
Question: how to use orderBy with groupBy ?
See: issue #26
$scope.groups = [
{ category: 'alpha', id: 2 },
{ category: 'beta', id: 3 },
{ category: 'gamma', id: 0 },
{ category: 'alpha', id: 4 },
{ category: 'beta', id: 5 },
{ category: 'gamma', id: 1 }
];
// retrieves the min 'id' of a collection, used for the group ordering.
//you can use lodash instead. e.g: _.min(arr, 'id')
$scope.min = function(arr) {
return $filter('min')
($filter('map')(arr, 'id'));
}
<ul ng-repeat="group in groups | groupBy:'category' | toArray:true | orderBy:min">
<!-- print the group name -->
<li>{{ group.$key }}</li>
<!-- iterate over the group members and order each group by id -->
<li ng-repeat="item in group | orderBy:'id'">
{{ item }}
</li>
</ul>
<!--RESULT:
- gamma
- {"category":"gamma","id":0}
- {"category":"gamma","id":1}
- alpha
- {"category":"alpha","id":2}
- {"category":"alpha","id":4}
- beta
- {"category":"beta","id":3}
- {"category":"beta","id":5}
Question: how to filter (key, value) with ng-repeat ?
See: issue #29 or stackoverflow question
angular.module('app', ['angular.filter'])
.controller('MainCtrl', function($scope) {
//your example data
$scope.items = {
'A2F0C7':{ secId:'12345', pos:'a20' },
'C8B3D1':{ pos:'b10' }
};
//more advantage example
$scope.nestedItems = {
'A2F0C7':{
details: { secId:'12345', pos:'a20' }
},
'C8B3D1':{
details: { pos:'a20' }
},
'F5B3R1': { secId:'12345', pos:'a20' }
};
});
<b>Example1:</b>
<p ng-repeat="item in items | toArray: true | pick: 'secId'">
{{ item.$key }}, {{ item }}
</p>
<b>Example2:</b>
<p ng-repeat="item in nestedItems | toArray: true | pick: 'secId || details.secId'">
{{ item.$key }}, {{ item }}
</p>
Usage: <name>Filter
Example: maxFilter
uniqFilter
angular.module('app', ['angular.filter'])
.controller('MainCtrl', function($scope, maxFilter) {
$scope.list = [1,23,100,64,-79];
$scope.max = maxFilter($scope.list);
//...
})
//or
.factory('SomeFactory', function($filter) {
var maxFilter = $filter('max');
//...
});
You can extends existing filter by using the decorator, see quick example:
angular.module('app', ['angular.filter'])
.controller('MainCtrl', function($scope) {
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'alpha'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'alpha'},
{name: 'Scruath', team: 'gamma'},
{name: 'Ariel', team: 'beta'},
{name: 'Mani', team: 'gamma'},
{name: 'Dan', team: 'beta'},
{name: 'Jhon', team: 'gamma'}
];
})
.config(['$provide', function($provide) {
$provide.decorator('countByFilter', ['$delegate', function($delegate) {
//get the source filter function
var srcFilter = $delegate;
var extendsFilter = function() {
//srcFilter result
var srcResult = srcFilter.apply(this, arguments);
//if there is another arguments, we actually want to return the output
return !arguments[2] ? srcResult : sortByVal(srcResult);
};
//get an object and return it sorted
function sortByVal(obj) {
var result = {};
Object.keys(obj)
.sort(function(b,c) {
return obj[b] > obj[c] ? 1 : -1;
})
.forEach(function(key) {
result[key] = obj[key];
});
return result;
}
//we return the extends filter function
return extendsFilter;
}]);
}]);
<body ng-app="app" ng-controller="MainCtrl">
<p>{{ players | countBy: 'team' }}</p>
<b>Sorted list:</b>
<p>{{ players | countBy: 'team': true }}</p>
</body>
You can’t perform that action at this time.