Bunch of useful filters for AngularJS (with no external dependencies!)
Angular 2 version is now available: ng-pipes
(1) You can install angular-filter using 4 different methods:
- clone & build this repository
- via Bower: by running
$ bower install angular-filterfrom your terminal - via npm: by running
$ npm install angular-filterfrom your terminal - via cdnjs http://www.cdnjs.com/libraries/angular-filter
(2) Include angular-filter.js (or angular-filter.min.js) in your index.html, after including Angular itself.
(3) Add 'angular.filter' to your main module's list of dependencies.
When you're done, your setup should look similar to the following:
<!doctype html>
<html ng-app="myApp">
<head>
</head>
<body>
...
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
...
<script>
var myApp = angular.module('myApp', ['angular.filter']);
</script>
...
</body>
</html>Concatenates an array/object into another one.
function MainController ($scope) {
$scope.array = [ {a: 1}, {a: 2} ];
$scope.object = {
0: {a: 3},
1: {a: 4}
};
}<li ng-repeat="elm in array | concat:object">
{{ elm.a }}
</li>
<!--
result:
1 2 3 4
-->
<li ng-repeat="elm in object | concat:array">
{{ elm.a }}
</li>
<!--
result:
3 4 1 2
-->Remove duplicates from an array/object.
If a string is provided, it will filter out duplicates using the provided expression.
Usage: collection | unique: 'property'
aliases: uniq
function MainController ($scope) {
$scope.orders = [
{ id:1, customer: { name: 'John', id: 10 } },
{ id:2, customer: { name: 'William', id: 20 } },
{ id:3, customer: { name: 'John', id: 10 } },
{ id:4, customer: { name: 'William', id: 20 } },
{ id:5, customer: { name: 'Clive', id: 30 } }
];
}Ex: Filter by customer.id
<!--search only by id -->
<th ng-repeat="user in users | filterBy: ['id']: 1">
{{ user.id }} : {{ user.first_name }} {{ user.last_name }}
</th>
<!--result:
1: Rob John
-->Return users whose first name or last name is 'John' (uses nested properties).
<!--search by first_name and last_name -->
<th ng-repeat="user in users | filterBy: ['user.first_name', 'user.last_name']: 'John'">
{{ user.first_name }} {{ user.last_name }}
</th>
<!--result:
1: Rob John
2: John Wayne
-->Return users whose full name is
<!--search by full name -->
<th ng-repeat="user in users | filterBy: ['user.first_name + user.last_name']: 'Rob Joh'">
{{ user.id }}: {{ user.first_name }} {{ user.last_name }}
</th>
<!--result:
1: Rob John
3: Rob Johannson
-->Gets the first element(s) of a collection.
If an expression is provided, it will only return elements whose expression is truthy.
Usage: See below
$scope.users = [
{ id: 1, name: { first: 'John', last: 'Wayne' } },
{ id: 2, name: { first: 'Mike', last: 'Johannson' } },
{ id: 3, name: { first: 'William', last: 'Kyle' } },
{ id: 4, name: { first: 'Rob', last: 'Thomas' } }
];Returns the first user.
{{ users | first }}
<!--result:
{ id: 1, name: { first: 'John', last: 'Wayne' } }
-->Returns the first user whose first name is 'Rob' and last name is 'Thomas'
<!-- collection | first: expression -->
{{ users | first: 'name.first === \'Rob\' && name.last === \'Thomas\'' }}
<!--result:
[ { id: 4, name: { first: 'Rob', last: 'Thomas' } } ]
-->Return the first two users
<!-- collection | first: n -->
<th ng-repeat="user in users | first: 2">
{{ user.name.first }}
</th>
<!--result:
John
Mike
-->Return the first two users with even id
<p>{{ names | join:', ' }}</p>
<!-- Will print "John, Sebastian, Will, James" -->fuzzy string searching(approximate string matching). Read more
note: use fuzzyBy to filter by one property to improve performance
Usage: collection | fuzzy: search: caseSensitive[optional]
$scope.books = [
{ title: 'The DaVinci Code', author: 'F. Scott Fitzgerald' },
{ title: 'The Great Gatsby', author: 'Dan Browns' },
{ title: 'Angels & Demons', author: 'Dan Louis' },
{ title: 'The Lost Symbol', author: 'David Maine' },
{ title: 'Old Man\'s War', author: 'Rob Grant' }
];<input type="text" ng-model="search" placeholder="search book" />
<li ng-repeat="book in books | fuzzy: search">
{{ book.title }}
</li>
<!--case sensitive-->
<li ng-repeat="book in books | fuzzy: search: true">
{{ book.title }}
</li>fuzzy string searching(approximate string matching) by property(nested to). Read more
Usage: collection | fuzzyBy: 'property': search: caseSensitive[optional]
$scope.books = [
{ title: 'The DaVinci Code' },
{ title: 'The Great Gatsby' },
{ title: 'Angels & Demons' },
{ title: 'The Lost Symbol' },
{ title: 'Old Man\'s War' }
];<input type="text" ng-model="search" placeholder="search by title" />
<li ng-repeat="book in books | fuzzyBy: 'title': search">
{{ book.title }}
</li>
<!--case sensitive-->
<li ng-repeat="book in books | fuzzyBy: 'title': search: true">
{{ book.title }}
</li>Create an object composed of keys generated from the result of running each element of a collection,
each key is an array of the elements.
Usage: (key, value) in collection | groupBy: 'property' or ... | groupBy: 'nested.property'
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];<li ng-repeat="order in ordersWithFallback | defaults: fallback">
<!-- ..... -->
</li>comparison for each element in a collection to the given properties object,
returning an array of all elements that have equivalent property values.
$scope.collection = [
{ id: 1, name: 'foo' },
{ id: 1, name: 'bar' },
{ id: 2, name: 'baz' }
]<tr ng-repeat="obj in collection | where:{id: 1}">
{{ obj.name }}
</tr>
<!-- result:
foo
bar
-->
<tr ng-repeat="obj in collection | where:{id: 1, name: 'foo'}">
{{ obj.name }}
</tr>
<!-- result:
foo
-->return collection without the omitted objects(by expression).
usage: collection | omit: expression
example 1:
$scope.mod2 = function(elm) {
return !(elm % 2);
}<input ng-model="search" placeholder="search by full name"/>
<th ng-repeat="user in users | searchField: 'first_name': 'last_name' | filter: search">
{{ user.first_name }} {{ user.last_name }}
</th>
<!-- so now you can search by full name -->get a collection(array or object) and specified count, and returns all of the items in the collection after the specified count.
$scope.collection = [
{ name: 'foo' },
{ name: 'bar' },
{ name: 'baz' },
{ name: 'zap' },
];<tr ng-repeat="col in collection | after:2">
{{ col.name }}
</tr>
<!--result:
baz
zap
-->get a collection and properties object, and returns all of the items, in the collection after the first that found with the given properties, including it.
$scope.orders = [
{ id: 1, customer: { name: 'foo' }, date: 'Tue Jul 15 2014' },
{ id: 2, customer: { name: 'foo' }, date: 'Tue Jul 16 2014' },
{ id: 3, customer: { name: 'foo' }, date: 'Tue Jul 17 2014' },
{ id: 4, customer: { name: 'foo' }, date: 'Tue Jul 18 2014' },
{ id: 5, customer: { name: 'foo' }, date: 'Tue Jul 19 2014' }
];<tr ng-repeat="order in orders | afterWhere:{ date: 'Tue Jul 17 2014' }">
order: {{ order.id }}, {{ order.date }}
</tr>
<!--result:
order: 3, Tue Jul 17 2014
order: 4, Tue Jul 18 2014
order: 5, Tue Jul 19 2014
-->get a collection(array or object) and specified count, and returns all of the items in the collection before the specified count.
$scope.collection = [
{ name: 'foo' },
{ name: 'bar' },
{ name: 'baz' },
{ name: 'zap' },
];<tr ng-repeat="col in collection | before:3">
{{ col.name }}
</tr>
<!--result:
foo
bar
-->get a collection and properties object, and returns all of the items, in the collection before the first that found with the given properties, including it.
$scope.orders = [
{ id: 1, customer: { name: 'foo' }, date: 'Tue Jul 15 2014' },
{ id: 2, customer: { name: 'foo' }, date: 'Tue Jul 16 2014' },
{ id: 3, customer: { name: 'foo' }, date: 'Tue Jul 17 2014' },
{ id: 4, customer: { name: 'foo' }, date: 'Tue Jul 18 2014' },
{ id: 5, customer: { name: 'foo' }, date: 'Tue Jul 19 2014' }
];<tr ng-repeat="order in orders | beforeWhere:{ date: 'Tue Jul 17 2014' }">
order: {{ order.id }}, {{ order.date }}
</tr>
<!--result:
order: 1, Tue Jul 15 2014
order: 2, Tue Jul 16 2014
order: 3, Tue Jul 17 2014
-->Reverse the order of the elements in a collection
$scope.users = [
{ id: 1, name: 'bazzy' },
{ id: 2, name: 'dazzy' },
{ id: 3, name: 'lazzy' }
];<tr ng-repeat="user in users | reverse">
user: {{ user.id }}, {{ user.name }}
</tr>
<!--result:
user: 3, lazzy
user: 2, dazzy,
user: 1, bazzy
-->get collection or string and return if it empty[Boolean]
<tr ng-repeat="order in orders" ng-hide="orders | isEmpty">
<!-- ..... -->
</tr>
<!--some replacer msg-->
<tr ng-show="orders | isEmpty">
no content to show
</tr>Checks if given expression(or value) is present in one or more object in the collection
Usage: collection | contains: 'expression'
Aliases: some
example 1:
$scope.array = [1,2,3,4];<th ng-show="{{ array | contains: 2 }}">...</th>example 2:
$scope.collection = [
{ user: { id: 1, name: 'foo' } },
{ user: { id: 2, name: 'bar' } },
{ user: { id: 3, name: 'baz' } }
];[<span ng-repeat="i in [] | range: 3">{{i}},</span>]
<!--result:
[0,1,2,]
-->[<span ng-repeat="i in [] | range: 10:10">{{i}},</span>]
<!--result:
[10,11,12,13,14,15,16,17,18,19,]
-->[<span ng-repeat="i in [] | range: 10:5:2">{{ i }},</span>]
<!--result:
[5, 7, 9, 11, 13, 15, 17, 19, 21, 23]
-->[<span ng-repeat="i in [] | range: 11:4:2">{{ i }},</span>]
<!--result:
[4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]
-->$scope.double = function(i) {
return i * 2;
}[<span ng-repeat="i in [] | range: 11:4:2:double">{{ i }},</span>]
<!--result:
[8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48]
-->ucfirstFilter get string as parameter and return it capitalized
<p> {{ 'foo bar baz' | ucfirst }}</p>
<!--
result:
Foo Bar Baz
-->get string as parameter and return encoded uri
<a ng-href="http://domain.com/fetch/{{ data.name | uriEncode }}">Link</a>get string as parameter and return encoded uri component
<a ng-href="http://domain.com/fetch/{{ 'Some&strange=chars' | uriComponentEncode }}">Link</a>Transform text into a URL slug. Replaces whitespaces, with dash("-"), or given argument
<a ng-href="http://domain.com/fetch/{{ 'Some string with spaces' | slugify }}">Link</a>
<!--replace with given argument-->
<a ng-href="http://domain.com/fetch/{{ 'Some string with spaces' | slugify:'=' }}">Link</a>
<!--
result:
<a ng-href="http://domain.com/fetch/some-string-with-spaces">Link</a>
<a ng-href="http://domain.com/fetch/some=string=with=spaces">Link</a>
-->Remove accents/diacritics from a string
{{ 'Sòme strÏng with Âccénts' | latinize }}
<!--
result:
Some strIng with Accents
-->return whether string starts with the starts parameter.
usage: string | startsWith: 'start': case-sensitive[optional]
<p>{{ text | stripTags }}</p>
<!--result:
Lorem Ipsum is simply dummy text of the printing...
-->get string with {n} and replace match with enumeration values
<div ng-show="{{ array | map | sum | isGreaterThan: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | >: num }}"></div>aliases: >=
<div ng-show="{{ array | map | sum | isGreaterThanOrEqualTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | >=: num }}"></div>aliases: <
<div ng-show="{{ array | map | sum | isLessThan: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | <: num }}"></div>aliases: <=
<div ng-show="{{ array | map | sum | isLessThanOrEqualTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | <=: num }}"></div>aliases: ==
<div ng-show="{{ array | map | sum | isEqualTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | ==: num }}"></div>aliases: !=
<div ng-show="{{ array | map | sum | isNotEqualTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | !=: num }}"></div>aliases: ===
<div ng-show="{{ array | map | sum | isIdenticalTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | ===: num }}"></div>aliases: !==
<div ng-show="{{ array | map | sum | isNotIdenticalTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | !==: num }}"></div>- fix issue #119
- fix issue #145
- add
rangeandchunk-byfilters - fix issue #139
- add
matchandtestfilters
- add
latinizefilter
minandmaxcan get a property as an argument.- improve
slugifyfilter. - refactor
filterWatcher(memoize), now it works like a charm. - refactor
groupBynow it can get be chain with other filters
- fix issue #38 with reverseFilter
- add defaultsFilter
- improve docs, tests
- add condition filters set.
- Add project website on branch gh-pages, see Github-help
- If you planning add some feature please create issue before.
- Don't forget about tests.
Clone the project:
$ git clone
$ npm install
$ bower installRun the tests:
$ grunt test
