https://github.com/a8m/angular-filter

Bunch of useful filters for AngularJS (with no external dependencies!)
https://github.com/a8m/angular-filter

angular angular-filters filter ng-pipes

Last synced: 3 days ago
JSON representation

Bunch of useful filters for AngularJS (with no external dependencies!)

• Host: GitHub
• URL: https://github.com/a8m/angular-filter
• Owner: a8m
• License: mit
• Created: 2014-07-07T12:51:49.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2017-12-11T08:44:08.000Z (about 7 years ago)
• Last Synced: 2024-05-17T09:42:40.819Z (8 months ago)
• Topics: angular, angular-filters, filter, ng-pipes
• Language: JavaScript
• Homepage: https://github.com/a8m/angular-filter
• Size: 810 KB
• Stars: 2,926
• Watchers: 79
• Forks: 331
• Open Issues: 109
• Metadata Files:
  • Readme: README.md
  • License: license.md

Awesome Lists containing this project

• annals-of-awesome - Resource - Collection of filters for Angular with no external dependencies. (Web Development / Angular)
• Resources - Bunch of useful filters for AngularJS

README

        
# 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:

- [![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

    ...

    

    

    ...

    

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



  


    Group name: {{ key }}

    


      


        player: {{ player.name }}

      

    

  



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

```

[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