Angular-filter  

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

Angular 2 version is now available: ng-pipes

Table of contents:

• 
• 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 https://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:

    ...
    
    
    ...
    
    ...

Collection

concat

Concatenates an array/object into another one.

function MainController ($scope) {
  $scope.array = [ {a: 1}, {a: 2} ];
  $scope.object = {
    0: {a: 3},
    1: {a: 4}
  };
}

<li>
  {{ elm.a }}
</li>



<li>
  {{ elm.a }}
</li>

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

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

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

  {{ user.first_name }} {{ user.last_name }}

Return users whose full name is

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

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

{{ users | first }}

Returns the first user whose first name is 'Rob' and last name is 'Thomas'

{{ users | first: 'name.first === \'Rob\' && name.last === \'Thomas\'' }}

Return the first two users

  {{ user.name.first }}

Return the first two users with even id

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

$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' }
];

<input placeholder="search book" type="text">
<li>
  {{ book.title }}
</li>

<li>
  {{ book.title }}
</li>

fuzzyBy

fuzzy string searching(approximate string matching) by property(nested to). Read more
Usage: collection | fuzzyBy: 'property': search: caseSensitive[optional]

$scope.books = [
  { title: 'The DaVinci Code' },
  { title: 'The Great Gatsby' },
  { title: 'Angels & Demons'  },
  { title: 'The Lost Symbol'  },
  { title: 'Old Man\'s War'   }
];

<input placeholder="search by title" type="text">
<li>
  {{ book.title }}
</li>

<li>
  {{ book.title }}
</li>

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'

$scope.players = [
  {name: 'Gene', team: 'alpha'},
  {name: 'George', team: 'beta'},
  {name: 'Steve', team: 'gamma'},
  {name: 'Paula', team: 'beta'},
  {name: 'Scruath', team: 'gamma'}
];

<ul>
  <li>
    Group name: {{ key }}
    <ul>
      <li>
        player: {{ player.name }}
      </li>
    </ul>
  </li>
</ul>

&lt;-- Example with fill value --&gt;
<li>
  Block: {{ block }}
</li>

where

comparison for each element in a collection to the given properties object,
returning an array of all elements that have equivalent property values.

  $scope.collection = [
    { id: 1, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' }
  ]

  {{ obj.name }}




  {{ obj.name }}

omit

return collection without the omitted objects(by expression).
usage: collection | omit: expression
example 1:

$scope.mod2 = function(elm) {
  return !(elm % 2);
}

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

$scope.collection = [
    { name: 'foo' },
    { name: 'bar' },
    { name: 'baz' },
    { name: 'zap' },
  ];

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

$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' }
];

  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.

$scope.collection = [
    { name: 'foo' },
    { name: 'bar' },
    { name: 'baz' },
    { name: 'zap' },
  ];

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

$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' }
];

  order: {{ order.id }}, {{ order.date }}

reverse

Reverse the order of the elements in a collection

$scope.users = [
  { id: 1, name: 'bazzy' },
  { id: 2, name: 'dazzy' },
  { id: 3, name: 'lazzy' }
];

  user: {{ user.id }}, {{ user.name }}

isEmpty

get collection or string and return if it empty[Boolean]

  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:

$scope.array = [1,2,3,4];

...

example 2:

$scope.collection = [
  { user: { id: 1, name: 'foo' } },
  { user: { id: 2, name: 'bar' } },
  { user: { id: 3, name: 'baz' } }
];

...


  {{ user.id }}, {{ user.details.first_name }} {{ user.details.last_name }}

[<span>{{i}},</span>]

[<span>{{ i }},</span>]

[<span>{{ i }},</span>]

$scope.double = function(i) {
  return i * 2;
}

[<span>{{ i }},</span>]

String

ucfirst

ucfirstFilter get string as parameter and return it capitalized

<p> {{ 'foo bar baz' | ucfirst }}</p>

uriEncode

get string as parameter and return encoded uri

<a>Link</a>

uriComponentEncode

get string as parameter and return encoded uri component

<a>Link</a>

slugify

Transform text into a URL slug. Replaces whitespaces, with dash("-"), or given argument

<a>Link</a>

<a>Link</a>

latinize

Remove accents/diacritics from a string

 {{ 'Sòme strÏng with Âccénts' | latinize }}

startsWith

return whether string starts with the starts parameter.
usage: string | startsWith: 'start': case-sensitive[optional]

 {{ 'Lorem ipsum' | startsWith: 'lorem' }}
 {{ 'Lorem Ipsum' | startsWith: 'lorem': true }}
 

stringular

get string with {n} and replace match with enumeration values

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

</p><p>{{ text | truncate: 7: '...': true }}</p>

<p>{{ text | truncate: 13: '...' }}</p>


<p>{{ text | truncate: 50: '...' }}</p>


<div></div>

isGreaterThanOrEqualTo

aliases: >=

<div></div>

<div></div>

isLessThan

aliases: <

<div></div>

<div></div>

isLessThanOrEqualTo

aliases: <=

<div></div>

<div></div>

isEqualTo

aliases: ==

<div></div>

<div></div>

isNotEqualTo

aliases: !=

<div></div>

<div></div>

isIdenticalTo

aliases: ===

<div></div>

<div></div>

isNotIdenticalTo

aliases: !==

<div></div>

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

0.4.8

• add defaultsFilter
• improve docs, tests

0.4.7

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

$ git clone
$ npm install
$ bower install

Run the tests:

$ grunt test