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

- [![Gitter][gitter-image]][gitter-url]
- Get Started
- Common Questions
- Changelog
- Contributing
- TODO
- Collection
- after
- afterWhere
- before
- beforeWhere
- concat
- contains
- countBy
- chunkBy
- defaults
- every
- filterBy
- first
- flatten
- fuzzy
- fuzzyBy
- groupBy
- isEmpty
- join
- last
- map
- omit
- pick
- pluck
- range
- reverse
- remove
- removeWith
- searchField
- some
- toArray
- unique
- where
- xor
- String
- endsWith
- latinize
- repeat
- reverse
- slugify
- split
- startsWith
- stripTags
- stringular
- match
- phoneUS
- test
- trim
- ltrim
- rtrim
- truncate
- ucfirst
- uriEncode
- uriComponentEncode
- wrap
- Math
- min
- max
- abs
- percent
- radix
- sum
- degrees
- radians
- shortFmt
- byteFmt
- kbFmt
- Boolean
- isNull
- isDefined
- isUndefined
- isString
- isNumber
- isObject
- isArray
- isFunction
- isEqual
- isGreaterThan >
- isGreaterThanOrEqualTo >=
- isLessThan <
- isLessThanOrEqualTo <=
- isEqualTo ==
- isNotEqualTo !=
- isIdenticalTo ===
- isNotIdenticalTo !==

Get Started

(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

... ... ...`

`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-help
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

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

Get Started

(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

`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-help
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``

angular-filter

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]

Angular 2 version is now available: ng-pipes

Table of contents:

Get Started

Collection

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

String

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

Changelog

$3

$3

$3

$3

$3

$3

$3

$3

$3

TODO

Contributing

angular-filter

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]

Angular 2 version is now available: ng-pipes

Table of contents:

Get Started

Collection

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

String

$3

$3

$3

$3

$3

$3

$3

$3

$3

$3

`Collection`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`Collection`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`

`$3`