Angular-filter
Bunch of useful filters for AngularJS (with no external dependencies!)
Under MIT License
By a8m
Bunch of useful filters for AngularJS (with no external dependencies!)
Under MIT License
By a8m
Angular-filter [![NPM version][npm-image]][npm-url] [![Build status][travis-image]][travis-url] [![Test coverage][coveralls-image]][coveralls-url] [![License][license-image]][license-url]
Bunch of useful filters for AngularJS (with no external dependencies!)
Angular 2 version is now available: ng-pipes
Table of contents:
>
>=
<
<=
==
!=
===
!==
(1) You can install angular-filter using 4 different methods:
- clone & build this repository
- via Bower: by running $ bower install angular-filter
from your terminal
- via npm: by running $ npm install angular-filter
from 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:
```html
...
...
var myApp = angular.module('myApp', ['angular.filter']);
...
```
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
```
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: uniqjs
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
{{ 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 }}
```
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 }}
```
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
```
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
```
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
<-- Example with fill value -->
```
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 }}
```
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 }}
```
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 }}
```
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 }}
```
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 }}
```
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 }}
```
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 }}
```
get collection or string and return if it empty[Boolean]
```html
no content to show
```
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 }},]
```
ucfirstFilter get string as parameter and return it capitalized
```html
{{ 'foo bar baz' | ucfirst }}
```
get string as parameter and return encoded uri
html
<a ng-href="http://domain.com/fetch/{{ data.name | uriEncode }}">Link</a>
get string as parameter and return encoded uri component
html
<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
```html
Link
Link
```
Remove accents/diacritics from a string
```html
{{ 'Sòme strÏng with Âccénts' | latinize }}
```
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 }}
```
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: '...' }}
```
### isGreaterThanOrEqualTo
**aliases:** `>=`
```html
```
### isLessThan
**aliases:** `<`
```html
```
### isLessThanOrEqualTo
**aliases:** `<=`
```html
```
### isEqualTo
**aliases:** `==`
```html
```
### isNotEqualTo
**aliases:** `!=`
```html
```
### isIdenticalTo
**aliases:** `===`
```html
```
### isNotIdenticalTo
**aliases:** `!==`
```html
```
## Changelog
### 0.5.7
* fix issue #119
### 0.5.6
* fix issue #145
### 0.5.5
* add `range` and `chunk-by` filters
* fix issue #139
### 0.5.4
* add `match` and `test` filters
### 0.5.3
* add `latinize` filter
### 0.5.1
* `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
### 0.4.9
* fix issue #38 with [reverseFilter](#reverse)
### 0.4.8
* add [defaultsFilter](#defaults)
* improve docs, tests
### 0.4.7
* add [condition filters](#Boolean) set.
## TODO
- Add project website on branch gh-pages, see **[Github-help](https://help.github.com/articles/creating-project-pages-manually)**
## Contributing
* 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