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] Bunch of useful filters for AngularJS *(with no external dependencies!)* <h3 align="center"> <img src="https://angular.io/assets/images/logos/angular/angular.svg" width="50" alt="angular pipes"><br/> Angular 2 version is now available: <a href="https://github.com/a8m/ng-pipes">ng-pipes</a> </h3> ## 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) - [latinize](#latinize) - [repeat](#repeat) - [reverse](#reverse-1) - [slugify](#slugify) - [split](#split) - [startsWith](#startswith) - [stripTags](#striptags) - [stringular](#stringular) - [match](#match) - [phoneUS](#phoneus) - [test](#test) - [trim](#trim) - [ltrim](#ltrim) - [rtrim](#rtrim) - [truncate](#truncate) - [ucfirst](#ucfirst) - [uriEncode](#uriencode) - [uriComponentEncode](#uricomponentencode) - [wrap](#wrap) - [Math](#math) - [min](#min) - [max](#max) - [abs](#abs) - [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 <!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> ``` ## 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 <li ng-repeat="elm in array | concat:object"> {{ elm.a }} </li>  <li ng-repeat="elm in object | concat:array"> {{ elm.a }} </li>  ``` ### unique Remove duplicates from an array/object.<br/> If a string is provided, it will filter out duplicates using the provided expression.<br/> **Usage:** ```collection | unique: 'property' ```<br/> **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 <th>Customer list:</th> <tr ng-repeat="order in orders | unique: 'customer.id'" > <td> {{ order.customer.name }} , {{ order.customer.id }} </td> </tr>  <th ng-repeat="user in users | filterBy: ['id']: 1"> {{ user.id }} : {{ user.first_name }} {{ user.last_name }} </th>  ``` Return users whose first name or last name is 'John' (uses nested properties). ```html  <th ng-repeat="user in users | filterBy: ['user.first_name', 'user.last_name']: 'John'"> {{ user.first_name }} {{ user.last_name }} </th>  ``` Return users whose full name is ```html  <th ng-repeat="user in users | filterBy: ['user.first_name + user.last_name']: 'Rob Joh'"> {{ user.id }}: {{ user.first_name }} {{ user.last_name }} </th>  ``` ### first Gets the first element(s) of a collection.<br/> If an expression is provided, it will only return elements whose expression is truthy.<br/> ***Usage:*** See below <br/> ```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  <th ng-repeat="user in users | first: 2"> {{ user.name.first }} </th>  ``` Return the first two users with even id ```html  <th ng-repeat="user in users | first: 2: '!(id%2)'"> {{ user.name }} </th>  {{ users | last: 'name.last === \'bar\'' }}  <th ng-repeat="user in users | last: 2"> {{ user.name }} </th>  <th ng-repeat="user in users | last: 2: '!(id%2)'"> {{ user.name }} </th>  ``` ### fuzzy fuzzy string searching(approximate string matching). [Read more](http://en.wikipedia.org/wiki/Approximate_string_matching)<br/> **note:** use fuzzyBy to filter by one property to improve performance<br/> **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 <input type="text" ng-model="search" placeholder="search book" /> <li ng-repeat="book in books | fuzzy: search"> {{ book.title }} </li>  <li ng-repeat="book in books | fuzzy: search: true"> {{ book.title }} </li> ``` ### fuzzyBy fuzzy string searching(approximate string matching) by property(nested to). [Read more](http://en.wikipedia.org/wiki/Approximate_string_matching)<br/> **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 <input type="text" ng-model="search" placeholder="search by title" /> <li ng-repeat="book in books | fuzzyBy: 'title': search"> {{ book.title }} </li>  <li ng-repeat="book in books | fuzzyBy: 'title': search: true"> {{ book.title }} </li> ``` ### groupBy Create an object composed of keys generated from the result of running each element of a collection,<br/> each key is an array of the elements.<br/> **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 <ul> <li ng-repeat="(key, value) in players | groupBy: 'team'"> Group name: {{ key }} <ul> <li ng-repeat="player in value"> player: {{ player.name }} </li> </ul> </li> </ul>  <-- Example with fill value --> <li ng-repeat="block in array | chunkBy: 4: 0" > Block: {{ block }} </li>  </li> ``` ### where comparison for each element in a collection to the given properties object,<br/> 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 <tr ng-repeat="obj in collection | where:{id: 1}"> {{ obj.name }} </tr>  <tr ng-repeat="obj in collection | where:{id: 1, name: 'foo'}"> {{ obj.name }} </tr>  ``` ### omit return collection without the omitted objects(by expression).<br/> usage: ```collection | omit: expression```<br/> **example 1:** ```js $scope.mod2 = function(elm) { return !(elm % 2); } ``` ```html <tr ng-repeat="num in [1,2,3,4,5,6] | omit: mod2"> {{ num }}, </tr>  <tr ng-repeat="obj in collection | removeWith:{ id: 1, name: 'foo' }"> {{ obj.name }} </tr>  ``` ### 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 <tr ng-repeat="col in collection | after:2"> {{ col.name }} </tr>  ``` ### 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 <tr ng-repeat="order in orders | afterWhere:{ date: 'Tue Jul 17 2014' }"> order: {{ order.id }}, {{ order.date }} </tr>  ``` ### 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 <tr ng-repeat="col in collection | before:3"> {{ col.name }} </tr>  ``` ### 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 <tr ng-repeat="order in orders | beforeWhere:{ date: 'Tue Jul 17 2014' }"> order: {{ order.id }}, {{ order.date }} </tr>  ``` ### 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 <tr ng-repeat="user in users | reverse"> user: {{ user.id }}, {{ user.name }} </tr>  ``` ### isEmpty get collection or string and return if it empty[Boolean] ```html <tr ng-repeat="order in orders" ng-hide="orders | isEmpty">  </tr>  <tr ng-show="orders | isEmpty"> no content to show </tr> ``` ### contains Checks if given expression(or value) is present in one or more object in the collection<br/> **Usage:** ```collection | contains: 'expression'```<br/> **Aliases:** some<br/> example 1: ```js $scope.array = [1,2,3,4]; ``` ```html <th ng-show="{{ array | contains: 2 }}">...</th> ``` example 2: ```js $scope.collection = [ { user: { id: 1, name: 'foo' } }, { user: { id: 2, name: 'bar' } }, { user: { id: 3, name: 'baz' } } ]; ``` ```html <th ng-show="{{ collection | some: '!(user.id % 2) && user.name.indexOf(\'b\') === 0' }}">...</th>  <th ng-repeat="user in users1 | xor: users2: 'details.last_name'"> {{ user.id }}, {{ user.details.first_name }} {{ user.details.last_name }} </th>  ``` ```html [<span ng-repeat="i in [] | range: 10:10">{{i}},</span>]  ``` ```html [<span ng-repeat="i in [] | range: 10:5:2">{{ i }},</span>]  ``` ```html [<span ng-repeat="i in [] | range: 11:4:2">{{ i }},</span>]  ``` ```js $scope.double = function(i) { return i * 2; } ``` ```html [<span ng-repeat="i in [] | range: 11:4:2:double">{{ i }},</span>]  ``` ## String ### ucfirst ucfirstFilter get string as parameter and return it capitalized ```html <p> {{ 'foo bar baz' | ucfirst }}</p>  ``` ### uriEncode get string as parameter and return encoded uri ```html <a ng-href="http://domain.com/fetch/{{ data.name | uriEncode }}">Link</a> ``` ### uriComponentEncode get string as parameter and return encoded uri component ```html <a ng-href="http://domain.com/fetch/{{ 'Some&strange=chars' | uriComponentEncode }}">Link</a> ``` ### slugify Transform text into a URL slug. Replaces whitespaces, with dash("-"), or given argument ```html <a ng-href="http://domain.com/fetch/{{ 'Some string with spaces' | slugify }}">Link</a>  <a ng-href="http://domain.com/fetch/{{ 'Some string with spaces' | slugify:'=' }}">Link</a>  ``` ### 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.<br/> usage: ```string | startsWith: 'start': case-sensitive[optional]```<br/> ```html {{ 'Lorem ipsum' | startsWith: 'lorem' }} {{ 'Lorem Ipsum' | startsWith: 'lorem': true }}  ``` ### stringular get string with {n} and replace match with enumeration values ```html <p>{{ 'lorem {0} dolor {1} amet' | stringular:'ipsum':'sit' }}</p> <p>{{ '{3} {0} dolor {1} amet' | stringular:'ipsum':'sit':null:'lorem' }}</p>  <p>{{ 'lorem {0} dolor sit amet' | stringular }}<p>  <p>{{ text | truncate: 7: '...': true }}</p> <p>{{ text | truncate: 13: '...' }}</p>  <p>{{ text | truncate: 50: '...' }}</p>  <div ng-show="{{ array | map | sum | >: num }}"></div> ``` ### isGreaterThanOrEqualTo **aliases:** `>=` ```html <div ng-show="{{ array | map | sum | isGreaterThanOrEqualTo: num }}"></div>  <div ng-show="{{ array | map | sum | >=: num }}"></div> ``` ### isLessThan **aliases:** `<` ```html <div ng-show="{{ array | map | sum | isLessThan: num }}"></div>  <div ng-show="{{ array | map | sum | <: num }}"></div> ``` ### isLessThanOrEqualTo **aliases:** `<=` ```html <div ng-show="{{ array | map | sum | isLessThanOrEqualTo: num }}"></div>  <div ng-show="{{ array | map | sum | <=: num }}"></div> ``` ### isEqualTo **aliases:** `==` ```html <div ng-show="{{ array | map | sum | isEqualTo: num }}"></div>  <div ng-show="{{ array | map | sum | ==: num }}"></div> ``` ### isNotEqualTo **aliases:** `!=` ```html <div ng-show="{{ array | map | sum | isNotEqualTo: num }}"></div>  <div ng-show="{{ array | map | sum | !=: num }}"></div> ``` ### isIdenticalTo **aliases:** `===` ```html <div ng-show="{{ array | map | sum | isIdenticalTo: num }}"></div>  <div ng-show="{{ array | map | sum | ===: num }}"></div> ``` ### isNotIdenticalTo **aliases:** `!==` ```html <div ng-show="{{ array | map | sum | isNotIdenticalTo: num }}"></div>  <div ng-show="{{ array | map | sum | !==: num }}"></div> ``` ## 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. <br/> <br/> ## 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: <br/> ```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