# 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!)* **Notice:** if you want to use `angular-filter` out of AngularJS(e.g: Node, etc..), check [Agile.js repo](https://github.com/a8m/agile) ## Table of contents: - [![Gitter][gitter-image]][gitter-url] - [Get Started](#get-started) - [Common Questions](https://github.com/a8m/angular-filter/wiki/Common-Questions) - [Changelog](#changelog) - [Contributing](#contributing) - [TODO](#todo) - [Collection](#collection) - [after](#after) - [afterWhere](#afterwhere) - [before](#before) - [beforeWhere](#beforewhere) - [concat](#concat) - [contains](#contains) - [countBy](#countby) - [chunkBy](#chunkby) - [defaults](#defaults) - [every](#every) - [filterBy](#filterby) - [first](#first) - [flatten](#flatten) - [fuzzy](#fuzzy) - [fuzzyBy](#fuzzyby) - [groupBy](#groupby) - [isEmpty](#isempty) - [join](#join) - [last](#last) - [map](#map) - [omit](#omit) - [pick](#pick) - [pluck](#pluck) - [range](#range) - [reverse](#reverse) - [remove](#remove) - [removeWith](#removewith) - [searchField](#searchfield) - [some](#contains) - [toArray](#toarray) - [unique](#unique) - [where](#where) - [xor](#xor) - [String](#string) - [endsWith](#endswith) - [repeat](#repeat) - [reverse](#reverse-1) - [slugify](#slugify) - [latinize](#latinize) - [startsWith](#startswith) - [stripTags](#striptags) - [stringular](#stringular) - [test](#test) - [match](#match) - [trim](#trim) - [ltrim](#ltrim) - [rtrim](#rtrim) - [truncate](#truncate) - [ucfirst](#ucfirst) - [uriEncode](#uriencode) - [uriComponentEncode](#uricomponentencode) - [wrap](#wrap) - [Math](#math) - [min](#min) - [max](#max) - [percent](#percent) - [radix](#radix) - [sum](#sum) - [degrees](#degrees) - [radians](#radians) - [shortFmt](#shortfmt) - [byteFmt](#bytefmt) - [kbFmt](#kbfmt) - [Boolean](#boolean) - [isNull](#isnull) - [isDefined](#isdefined) - [isUndefined](#isundefined) - [isString](#isstring) - [isNumber](#isnumber) - [isObject](#isobject) - [isArray](#isarray) - [isFunction](#isfunction) - [isEqual](#isequal) - [isGreaterThan](#isgreaterthan) `>` - [isGreaterThanOrEqualTo](#isgreaterthanorequalto) `>=` - [isLessThan](#islessthan) `<` - [isLessThanOrEqualTo](#islessthanorequalto) `<=` - [isEqualTo](#isequalto) `==` - [isNotEqualTo](#isnotequalto) `!=` - [isIdenticalTo](#isidenticalto) `===` - [isNotIdenticalTo](#isnotidenticalto) `!==` ## Get Started **(1)** You can install angular-filter using 4 different methods: - clone & [build](#Contributing) this repository - via **[Bower](http://bower.io/)**: by running `$ bower install angular-filter` from your terminal - via **[npm](https://www.npmjs.org/)**: 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 ###concat 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 }}
  • ``` ###unique 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 }} ``` ###first 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 fuzzy string searching(approximate string matching). [Read more](http://en.wikipedia.org/wiki/Approximate_string_matching)
    **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 }}
  • ``` ###fuzzyBy fuzzy string searching(approximate string matching) by property(nested to). [Read more](http://en.wikipedia.org/wiki/Approximate_string_matching)
    **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 }}
  • ``` ###groupBy 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 -->
  • Block: {{ block }}
  • ``` ###where 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 }} ``` ###omit 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 }} ``` ###after 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 }} ``` ###afterWhere 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 }} ``` ###before 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 }} ``` ###beforeWhere 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 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 }} ``` ###isEmpty get collection or string and return if it empty[Boolean] ```html no content to show ``` ###contains 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 ###ucfirst ucfirstFilter get string as parameter and return it capitalized ```html

    {{ 'foo bar baz' | ucfirst }}

    ``` ###uriEncode get string as parameter and return encoded uri ```html Link ``` ###uriComponentEncode get string as parameter and return encoded uri component ```html Link ``` ###slugify Transform text into a URL slug. Replaces whitespaces, with dash("-"), or given argument ```html Link Link ``` ###latinize Remove accents/diacritics from a string ```html {{ 'Sòme strÏng with Âccénts' | latinize }} ``` ###startsWith 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 }} ``` ###stringular 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 ``` **Deploy:**
    Run the build task, update version before(bower,package) ```bash $ grunt build $ git tag v0.*.* $ git push origin master --tags ``` [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