Angular JS Chaining Filters
HTML
<div ng-app="app" ng-controller="AppCtrl">
{{value}}
<br>
{{chainedValue}}
<br>
{{friends}}
</div>
JavaScript
angular.module('app', [])
.service('FilterChain', ['$filter',
function($filter) {
var chain = {
value : '',
start : function(value) {
this.value = value;
return this;
},
applyFilter : function(filterName, args) {
args = args || [];
args.unshift(this.value);
this.value = $filter(filterName).apply(undefined, args)
return this;
}
};
return chain;
}])
.controller('AppCtrl', ['$scope', '$filter', 'FilterChain',
function ($scope, $filter, FilterChain) {
$scope.value = $filter('uppercase')($filter('limitTo')($filter('lowercase')('Active'), 5));
console.log(FilterChain);
$scope.chainedValue = FilterChain.start('Active')
.applyFilter('lowercase')
.applyFilter('limitTo', [5])
.applyFilter('uppercase')
.value;
$scope.friends = [
{ name: "Peter", age: 20 },
{ name: "Pablo", age: 55 },
{ name: "Linda", age: 20 },
{ name: "Marta", age: 37 },
{ name: "Othello", age: 20 },
{ name: "Markus", age: 32 }
];
$scope.friends = FilterChain.start($scope.friends)
.applyFilter('orderBy', ['age'])
.value;
}]);