Bunch of useful filters for angularJS(with no external dependencies!)
npm install angular-filter>>=<<===!====!==$ bower install angular-filter from your terminal$ npm install angular-filter from your terminal(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:
``html
Collection
$3
Concatenates an array/object into another one.
`js
function MainController ($scope) {
$scope.array = [ {a: 1}, {a: 2} ];
$scope.object = {
0: {a: 3},
1: {a: 4}
};
}
``html
{{ elm.a }}
{{ elm.a }}
`$3
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
`js
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
`html
Customer list:
{{ order.customer.name }} , {{ order.customer.id }}
{{ user.id }} : {{ user.first_name }} {{ user.last_name }}
`
Return users whose first name or last name is 'John' (uses nested properties).
`html
{{ user.first_name }} {{ user.last_name }}
`
Return users whose full name is
`html
{{ user.id }}: {{ user.first_name }} {{ user.last_name }}
`
$3
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
`js
$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.
`html
{{ users | first }}
`
Returns the first user whose first name is 'Rob' and last name is 'Thomas'
`html
{{ users | first: 'name.first === \'Rob\' && name.last === \'Thomas\'' }}
`
Return the first two users
`html
{{ user.name.first }}
`
Return the first two users with even id
`html
{{ user.name }}
{{ users | last: 'name.last === \'bar\'' }}
{{ user.name }}
{{ user.name }}
`
$3
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]`
`js
$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' }
];
`
`html
{{ book.title }}
{{ book.title }}
`
$3
fuzzy string searching(approximate string matching) by property(nested to). Read more
Usage: `collection | fuzzyBy: 'property': search: caseSensitive[optional]`
`js
$scope.books = [
{ title: 'The DaVinci Code' },
{ title: 'The Great Gatsby' },
{ title: 'Angels & Demons' },
{ title: 'The Lost Symbol' },
{ title: 'Old Man\'s War' }
];
`
`html
{{ book.title }}
{{ book.title }}
`
$3
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'`
`js
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
`
`html
Group name: {{ key }}
player: {{ player.name }}
<-- Example with fill value -->
Block: {{ block }}
`
$3
comparison for each element in a collection to the given properties object,
returning an array of all elements that have equivalent property values.
`js
$scope.collection = [
{ id: 1, name: 'foo' },
{ id: 1, name: 'bar' },
{ id: 2, name: 'baz' }
]
`
`html
{{ obj.name }}
{{ obj.name }}
`
$3
return collection without the omitted objects(by expression).
usage: `collection | omit: expression`
example 1:
`js
$scope.mod2 = function(elm) {
return !(elm % 2);
}
`
`html
{{ num }},
{{ obj.name }}
`
$3
get a collection(array or object) and specified count, and returns all of the items
in the collection after the specified count.
`js
$scope.collection = [
{ name: 'foo' },
{ name: 'bar' },
{ name: 'baz' },
{ name: 'zap' },
];
`
`html
{{ col.name }}
`
$3
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.
`js
$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' }
];
`
`html
order: {{ order.id }}, {{ order.date }}
`$3
get a collection(array or object) and specified count, and returns all of the items
in the collection before the specified count.
`js
$scope.collection = [
{ name: 'foo' },
{ name: 'bar' },
{ name: 'baz' },
{ name: 'zap' },
];
`
`html
{{ col.name }}
`$3
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.
`js
$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' }
];
`
`html
order: {{ order.id }}, {{ order.date }}
`$3
Reverse the order of the elements in a collection`js
$scope.users = [
{ id: 1, name: 'bazzy' },
{ id: 2, name: 'dazzy' },
{ id: 3, name: 'lazzy' }
];
`
`html
user: {{ user.id }}, {{ user.name }}
`$3
get collection or string and return if it empty[Boolean]`html
no content to show
`
$3
Checks if given expression(or value) is present in one or more object in the collection
Usage: `collection | contains: 'expression'`
Aliases: some
example 1:
`js
$scope.array = [1,2,3,4];
`
`html
...
`
example 2:
`js
$scope.collection = [
{ user: { id: 1, name: 'foo' } },
{ user: { id: 2, name: 'bar' } },
{ user: { id: 3, name: 'baz' } }
];
`
`html
...
{{ user.id }}, {{ user.details.first_name }} {{ user.details.last_name }}
`
`html
[{{i}},]
`
`html
[{{ i }},]
`
`html
[{{ i }},]
`
`js
$scope.double = function(i) {
return i * 2;
}
`
`html
[{{ i }},]
`String
$3
ucfirstFilter get string as parameter and return it capitalized
`html
{{ 'foo bar baz' | ucfirst }}
`$3
get string as parameter and return encoded uri`html
Link
`$3
get string as parameter and return encoded uri component`html
Link
`$3
Transform text into a URL slug. Replaces whitespaces, with dash("-"), or given argument`html
Link
Link
`$3
Remove accents/diacritics from a string`html
{{ 'Sòme strÏng with Âccénts' | latinize }}
`
$3
return whether string starts with the starts parameter.
usage: `string | startsWith: 'start': case-sensitive[optional]`
`html
{{ 'Lorem ipsum' | startsWith: 'lorem' }}
{{ 'Lorem Ipsum' | startsWith: 'lorem': true }}
`
$3
get string with {n} and replace match with enumeration values`html
{{ 'lorem {0} dolor {1} amet' | stringular:'ipsum':'sit' }}
{{ '{3} {0} dolor {1} amet' | stringular:'ipsum':'sit':null:'lorem' }}
{{ 'lorem {0} dolor sit amet' | stringular }}
{{ text | truncate: 7: '...': true }}
{{ text | truncate: 13: '...' }}
{{ text | truncate: 50: '...' }}
`$3
aliases: >=
`html
`$3
aliases: <
`html
`$3
aliases: <=
`html
`$3
aliases: ==
`html
`$3
aliases: !=
`html
`$3
aliases: ===
`html
`$3
aliases: !==
`html
`
Changelog
$3
* fix issue #119$3
* fix issue #145$3
* add range and chunk-by filters
* fix issue #139$3
* add match and test filters$3
* add latinize filter$3
* min and max can get a property as an argument.
* improve slugify filter.
* refactor filterWatcher(memoize), now it works like a charm.
* refactor groupBy now it can get be chain with other filters$3
* fix issue #38 with reverseFilter$3
* add defaultsFilter
* improve docs, tests$3
* add condition filters set.
TODO
- Add project website on branch gh-pages, see Github-helpContributing
* If you planning add some feature please create issue before.
* Don't forget about tests.Clone the project:
`bash
$ git clone
$ npm install
$ bower install
`
Run the tests:
`bash
$ grunt test
``[npm-image]: https://img.shields.io/npm/v/angular-filter.svg?style=flat-square
[npm-url]: https://npmjs.org/package/angular-filter
[travis-image]: https://img.shields.io/travis/a8m/angular-filter.svg?style=flat-square
[travis-url]: https://travis-ci.org/a8m/angular-filter
[coveralls-image]: https://img.shields.io/coveralls/a8m/angular-filter.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/a8m/angular-filter
[license-image]: http://img.shields.io/npm/l/angular-filter.svg?style=flat-square
[license-url]: LICENSE
[gitter-image]: https://badges.gitter.im/Join%20Chat.svg
[gitter-url]: https://gitter.im/a8m/angular-filter?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge