a8m

Angular-filter  

Bunch of useful filters for AngularJS (with no external dependencies!)
Under MIT License
By a8m

angular filter angular-filters ng-pipes

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:


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



...


...

var myApp = angular.module('myApp', ['angular.filter']);


...


```


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 ishtml

    {{ 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 usershtml

    {{ user.name.first }}

    Return the first two users with even idhtml

    {{ user.name }}

    {{ users | last: 'name.last === \'bar\'' }}

    {{ user.name }}

    {{ user.name }}

    ```


    fuzzy

    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 }}

    • ```


    fuzzyBy

    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 }}

    • ```


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

    [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