Bunch of useful filters for AngularJS (with no external dependencies!)
Bunch of useful filters for AngularJS (with no external dependencies!)
Bunch of useful filters for AngularJS (with no external dependencies!)
(1) You can install angular-filter using 4 different methods:
$ bower install angular-filter from your terminal$ npm install angular-filter from your terminal(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:
<!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>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 ng-repeat="elm in array | concat:object">
{{ elm.a }}
</li>
<li ng-repeat="elm in object | concat:array">
{{ elm.a }}
</li>
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
<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).
<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
<th ng-repeat="user in users | filterBy: ['user.first_name + user.last_name']: 'Rob Joh'">
{{ user.id }}: {{ user.first_name }} {{ user.last_name }}
</th>
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
<th ng-repeat="user in users | first: 2">
{{ user.name.first }}
</th>
Return the first two users with even id
<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 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 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>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 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>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 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>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' }
]<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>
return collection without the omitted objects(by expression).
usage: collection | omit: expression
example 1:
$scope.mod2 = function(elm) {
return !(elm % 2);
}<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>
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' },
];<tr ng-repeat="col in collection | after:2">
{{ col.name }}
</tr>
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' }
];<tr ng-repeat="order in orders | afterWhere:{ date: 'Tue Jul 17 2014' }">
order: {{ order.id }}, {{ order.date }}
</tr>
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' },
];<tr ng-repeat="col in collection | before:3">
{{ col.name }}
</tr>
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' }
];<tr ng-repeat="order in orders | beforeWhere:{ date: 'Tue Jul 17 2014' }">
order: {{ order.id }}, {{ order.date }}
</tr>
Reverse the order of the elements in a collection
$scope.users = [
{ id: 1, name: 'bazzy' },
{ id: 2, name: 'dazzy' },
{ id: 3, name: 'lazzy' }
];<tr ng-repeat="user in users | reverse">
user: {{ user.id }No open issues yet, or sync has not completed.