当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

angular-filter

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者韦原

操作系统跨平台

开源组织无

适用人群未知

软件概览

Angular-filter

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

Angular 2 version is now available: ng-pipes

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

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

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>

<!--
result:
1 2 3 4
-->

<li ng-repeat="elm in object | concat:array">
  {{ elm.a }}
</li>

<!--
result:
3 4 1 2
-->

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

<th>Customer list:</th>
<tr ng-repeat="order in orders | unique: 'customer.id'" >
   <td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>

<!-- result:
All customers list:
John 10
William 20
Clive 30

filterBy

Filter a collection by a specific property.
Usage: collection | filterBy: [prop, nested.prop, etc..]: search: strict[optional]
Note: You can even use compound properties (e.g: |filterBy: [property + property]: model)

$scope.users = [
  { id: 1, user: { first_name: 'Rob', last_name: 'John',  mobile: 4444 } },
  { id: 2, user: { first_name: 'John', last_name: 'Wayne',  mobile: 3333 } },
  { id: 3, user: { first_name: 'Rob', last_name: 'Johansson',  mobile: 2222 } },
  { id: 4, user: { first_name: 'Mike', last_name: 'Terry',  mobile: 1111 } }
];

Return users whose id is 1

<!--search only by id -->
<th ng-repeat="user in users | filterBy: ['id']: 1">
  {{ user.id }} : {{ user.first_name }} {{ user.last_name }}
</th>
<!--result:
  1: Rob John
-->

Return users whose first name or last name is 'John' (uses nested properties).

<!--search by first_name and last_name -->
<th ng-repeat="user in users | filterBy: ['user.first_name', 'user.last_name']: 'John'">
  {{ user.first_name }} {{ user.last_name }}
</th>
<!--result:
  1: Rob John
  2: John Wayne
-->

Return users whose full name is

<!--search by full name -->
<th ng-repeat="user in users | filterBy: ['user.first_name + user.last_name']: 'Rob Joh'">
  {{ user.id }}: {{ user.first_name }} {{ user.last_name }}
</th>
<!--result:
  1: Rob John
  3: Rob Johannson
-->

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 }}
<!--result:
{ id: 1, name: { first: 'John', last: 'Wayne' } }
-->

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

<!-- collection | first: expression -->
{{ users | first: 'name.first === \'Rob\' && name.last === \'Thomas\'' }}
<!--result:
[ { id: 4, name: { first: 'Rob', last: 'Thomas' } } ]
-->

Return the first two users

<!-- collection | first: n -->
<th ng-repeat="user in users | first: 2">
  {{ user.name.first }}
</th>
<!--result:
John
Mike
-->

Return the first two users with even id

<!-- collection | first: n: expression -->
<th ng-repeat="user in users | first: 2: '!(id%2)'">
  {{ user.name }}
</th>
<!--result:
Mike
Rob

last

Gets the last element or last n elements of a collection,
if expression is provided, is returns as long the expression return truthy
Usage: See below

$scope.users = [
  { id: 1, name: { first: 'foo', last: 'bar' } },
  { id: 2, name: { first: 'baz', last: 'bar' } },
  { id: 3, name: { first: 'bar', last: 'bar' } },
  { id: 4, name: { first: 'lol', last: 'bar' } }
];

{{ users | last }}
<!--result:
{ id: 4, name: { first: 'lol', last: 'bar' } }

<!-- collection | last: expression -->
{{ users | last: 'name.last === \'bar\'' }}
<!--result:
[ { id: 4, name: { first: 'lol', last: 'bar' } } ]

<!-- collection | last: n -->
<th ng-repeat="user in users | last: 2">
  {{ user.name }}
</th>
<!--result:
bar
lol

<!-- collection | last: n: expression -->
<th ng-repeat="user in users | last: 2: '!(id%2)'">
  {{ user.name }}
</th>
<!--result:
baz
lol

flatten

Flattens a nested array (the nesting can be to any depth).
If you pass shallow, the array will only be flattened a single level
Usage: collection | flatten: shallow[optional]

$scope.weirdArray = [[], 1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, [12, [[[[[13], [[[[14, 15]]]]]]]]]]]]];

<th ng-repeat="elm in wierdArray | flatten">
 {{ elm }},
</th>
<!--result:
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15

join

Joins the contents of a collection into a string.
By default, it will join elements with a single space, but you can provide your own delimiter.

Usage: collection | join:', '

Example:

$scope.names = ['John', 'Sebastian', 'Will', 'James'];

<p>{{ names | join:', ' }}</p>
<!-- Will print "John, Sebastian, Will, James" -->

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 type="text" ng-model="search" placeholder="search book" />
<li ng-repeat="book in books | fuzzy: search">
  {{ book.title }}
</li>
<!--case sensitive-->
<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
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>
<!--case sensitive-->
<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,
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>
<!-- result:
  Group name: alpha
    * player: Gene
  Group name: beta
    * player: George
    * player: Paula
  Group name: gamma
    * player: Steve
    * player: Scruath

countBy

Create an object composed of keys generated from the result of running each element of a collection,
each key is the count of objects in each group
Usage: (key, value) in collection | countBy: 'property' or ... | countBy: 'nested.property'

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

<li ng-repeat="(key, value) in players | countBy: 'team'" >
  Group name: {{ key }}, length: {{ value }}
</li>
<!-- result:
  Group name: alpha, length: 1
  Group name: beta, length: 2
  Group name: gamma, length: 2

chunkBy

Collect data into fixed-length chunks or blocksUsage: (key, value) in collection | chunkBy: 'n': fill-value(optional)

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

<li ng-repeat="block in array | chunkBy: 2" >
  Block: {{ block }}
</li>
<!-- result:
  Block: [1, 2]
  Block: [3, 4]
  Block: [5, 6]
-->
<-- Example with fill value -->
<li ng-repeat="block in array | chunkBy: 4: 0" >
  Block: {{ block }}
</li>
<!-- result:
  Block: [1, 2, 3, 4]
  Block: [5, 6, 0, 0]

defaults

defaultsFilter allows to specify a default fallback value for properties that resolve to undefined.
Usage: col in collection | defaults: fallback

$scope.orders = [
      { id:1, destination: { zip: 21908 }, name: 'Ariel M' },
      { id:2, name: 'John F' },
      { id:3, destination: { zip: 45841 } },
      { id:4, destination: { zip: 78612 }, name: 'Danno L' },
  ];
$scope.fallback = {
      name: 'Customer name not available',
      destination: { zip: 'Pickup' }
  };

<li ng-repeat="order in orders | defaults: fallback">
    <b>id:</b> {{ order.id }},
    <b>name:</b> {{ order.name }},
    <b>shipping address:</b> {{ order.destination.zip }}
</li>
<!--Results:
* id: 1, name: Ariel M, shipping address: 21908
* id: 2, name: John F, shipping address: Pickup
* id: 3, name: Customer name not available, shipping address: 45841
* id: 4, name: Danno L, shipping address: 78612

Note: defaultsFilter change the source object.
Why? if we don't change the source object, it actually means we're gonna return a new object (copy operation) on each digest cycle.
And it will cause adverse memory and performance implications.
How to avoid it? see below

//We copy it once, and it's really cheaper
$scope.ordersWithFallback = angular.copy($scope.orders);

<li ng-repeat="order in ordersWithFallback | defaults: fallback">
    <!-- ..... -->
</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' }
  ]

<tr ng-repeat="obj in collection | where:{id: 1}">
  {{ obj.name }}
</tr>
<!-- result:
  foo
  bar
-->

<tr ng-repeat="obj in collection | where:{id: 1, name: 'foo'}">
  {{ obj.name }}
</tr>
<!-- result:
  foo
  -->

omit

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>
<!--result
1, 3, 5

example 2:

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

<tr ng-repeat="obj in collection | omit:'id > 1 && user.name.indexOf(\'b\') !== -1'">
  id: {{ obj.id }}, name: {{ obj.user.name }}
</tr>
<!--result:
id: 1, name: foo

pick

return collection composed of the picked objects(by expression).
usage: collection | pick: expression
example 1:

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

<tr ng-repeat="num in [1,2,3,4,5,6] | pick: mod2">
  {{ num }},
</tr>
<!--result
2, 4, 6

example 2:

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

<tr ng-repeat="obj in collection | pick:'id > 1 && user.name.indexOf(\'b\') !== -1'">
  id: {{ obj.id }}, name: {{ obj.user.name }}
</tr>
<!--result:
id: 2, name: bar
id:3, name: baz

remove

Returns a new collection of removed elements.

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

<tr ng-repeat="obj in collection | remove: foo: null: 1">
  {{ obj }}
</tr>
<!-- result:
  { "name": "bar" }

removeWith

comparison for each element in a collection to the given properties object,
returning an array without 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 | removeWith:{ id: 1 }">
  {{ obj.name }}
</tr>
<!-- result:
  baz
-->

<tr ng-repeat="obj in collection | removeWith:{ id: 1, name: 'foo' }">
  {{ obj.name }}
</tr>
<!-- result:
  bar
  baz

searchField

if you want to use the filter in angular and want to filter for multiple values
so searchField filter return new collection with property called searchField
support nested properties with dot notation i.e: collection | searchField: 'prop': 'nested.prop'

$scope.users = [
  { first_name: 'Sharon', last_name: 'Melendez' },
  { first_name: 'Edmundo', last_name: 'Hepler' },
  { first_name: 'Marsha', last_name: 'Letourneau' }
];

<input ng-model="search" placeholder="search by full name"/>
<th ng-repeat="user in users | searchField: 'first_name': 'last_name' | filter: search">
  {{ user.first_name }} {{ user.last_name }}
</th>
<!-- so now you can search by full name -->

after

get a collection(array or object) and specified count, and returns all of the itemsin 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>
<!--result:
  baz
  zap
-->

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

<tr ng-repeat="order in orders | afterWhere:{ date: 'Tue Jul 17 2014' }">
  order: {{ order.id }}, {{ order.date }}
</tr>
<!--result:
  order: 3, Tue Jul 17 2014
  order: 4, Tue Jul 18 2014
  order: 5, Tue Jul 19 2014
-->

before

get a collection(array or object) and specified count, and returns all of the itemsin 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>
<!--result:
  foo
  bar
-->

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

<tr ng-repeat="order in orders | beforeWhere:{ date: 'Tue Jul 17 2014' }">
  order: {{ order.id }}, {{ order.date }}
</tr>
<!--result:
  order: 1, Tue Jul 15 2014
  order: 2, Tue Jul 16 2014
  order: 3, Tue Jul 17 2014
-->

reverse

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 }}, {{ user.name }}
</tr>
<!--result:
  user: 3, lazzy
  user: 2, dazzy,
  user: 1, bazzy
-->

isEmpty

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

<tr ng-repeat="order in orders" ng-hide="orders | isEmpty">
<!-- ..... -->
</tr>
<!--some replacer msg-->
<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
Usage: collection | contains: 'expression'
Aliases: some
example 1:

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

<th ng-show="{{ array | contains: 2 }}">...</th>

example 2:

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

<th ng-show="{{ collection | some: '!(user.id % 2) && user.name.indexOf(\'b\') === 0' }}">...</th>
<!--result: true

every

Checks if given expression(or value) return truthy value for all members of a collection
Usage: collection | every: 'expression'
example 1:

$scope.array = [1,1,1,1];

<th ng-show="{{ array | every: 1 }}">...</th>
<!--result: true

example 2:

$scope.collection = [
  { user: { id: 4, name: 'foo' } },
  { user: { id: 6, name: 'bar' } },
  { user: { id: 8, name: 'baz' } }
];

<th ng-show="{{ collection | every: '!(user.id % 2)' }}">...</th>
<!--result: true

xor

Exclusive or between two collections
Usage: collection1 | xor: collection2: expression[optional]

Example1:

<p ng-repeat="elm in [1,2,3,4] | xor: [2,3,5]">
{{ elm }}
</p>
<!--result:
1 4 5

Example2:

$scope.users1 = [
  { id: 0, details: { first_name: 'foo', last_name: 'bar' } },
  { id: 1, details: { first_name: 'foo', last_name: 'baz' } },
  { id: 2, details: { first_name: 'foo', last_name: 'bag' } }
];
$scope.users2 = [
  { id: 3, details: { first_name: 'foo', last_name: 'bar' } },
  { id: 4, details: { first_name: 'foo', last_name: 'baz' } }
];

<th ng-repeat="user in users1 | xor: users2">
  {{ user.id }}
</th>
<!--result:
1 2 3 4 5
-->
<th ng-repeat="user in users1 | xor: users2: 'details.last_name'">
  {{ user.id }}, {{ user.details.first_name }} {{ user.details.last_name }}
</th>
<!--result:
2, foo bag

toArray

Convert objects into stable arrays.
Usage: object | toArray: addKey[optional]
if addKey set to true, the filter also attaches a new property $key to the value containing the original key that was used in the object we are iterating over to reference the property

<th ng-repeat="elm in object | toArray | orderBy: 'property'">
  {{ elm.name }}
</th>

map

Returns a new collection of the results of each expression execution.
Usage: collection | map: expression
Example1:

$scope.divide = function(elm) {
  return elm/2
}

<th ng-repeat="i in [1, 2, 3, 4, 5] | map: divide">
  {{ i }}
</th>
<!--result:
0.5, 1, 1.5, 2, 2.5

pluck

Used map

$scope.users = [
  { id:1, user: { name: 'Foo' } },
  { id:1, user: { name: 'Bar' } },
  { id:1, user: { name: 'Baz' } }
];

<th ng-repeat="name in users | map: 'user.name' ">
  {{ name }}
</th>
<!--result:
Foo
Bar
Baz

range

Return a new collection from a given length, start, increment, and callback
By default start is 0, increment is 1, and callback is null.Usage: collection | range: length:start:increment:callback

[<span ng-repeat="i in [] | range: 3">{{i}},</span>]
<!--result:
[0,1,2,]
-->

[<span ng-repeat="i in [] | range: 10:10">{{i}},</span>]
<!--result:
[10,11,12,13,14,15,16,17,18,19,]
-->

[<span ng-repeat="i in [] | range: 10:5:2">{{ i }},</span>]
<!--result:
[5, 7, 9, 11, 13, 15, 17, 19, 21, 23]
-->

[<span ng-repeat="i in [] | range: 11:4:2">{{ i }},</span>]
<!--result:
[4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]
-->

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

[<span ng-repeat="i in [] | range: 11:4:2:double">{{ i }},</span>]
<!--result:
[8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48]
-->

String

ucfirst

ucfirstFilter get string as parameter and return it capitalized

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

<!--
result:
Foo Bar Baz
-->

uriEncode

get string as parameter and return encoded uri

<a ng-href="http://domain.com/fetch/{{ data.name | uriEncode }}">Link</a>

uriComponentEncode

get string as parameter and return encoded uri component

<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

<a ng-href="http://domain.com/fetch/{{ 'Some string with spaces' | slugify }}">Link</a>
<!--replace with given argument-->
<a ng-href="http://domain.com/fetch/{{ 'Some string with spaces' | slugify:'=' }}">Link</a>
<!--
result:
<a ng-href="http://domain.com/fetch/some-string-with-spaces">Link</a>

<a ng-href="http://domain.com/fetch/some=string=with=spaces">Link</a>
-->

latinize

Remove accents/diacritics from a string

{{ 'Sòme strÏng with Âccénts' | latinize }}
<!--
result:
  Some strIng with Accents
-->

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 }}
 <!--result:
  true
  false

endsWith

return whether string ends with the ends parameter.
usage: string | endsWith: 'ends': case-sensitive[optional]

{{ 'image.JPG' | endsWith: '.jpg' }}
 {{ 'image.JPG' | endsWith: '.jpg': true }}
 <!--result:
  true
  false

stripTags

strip out html tags from string
**Important: this filter jobs it's not to replace ng-bind-html directive, it's only for tiny plain text

$scope.text = '<p class="paragraph">Lorem Ipsum is simply dummy text of the printing...</p>';

<p>{{ text | stripTags }}</p>
<!--result:
Lorem Ipsum is simply dummy text of the printing...
-->

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>

<!-- result:
<p>lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
-->

<p>{{ 'lorem {0} dolor sit amet' | stringular }}<p>
<!--result:
<p>lorem {0} dolor sit amet</p>

phoneUS

Format a string or a number into a us-style phone number

<p>{{ 1234567890 | phoneUS }}</p>

<!--result:
<p>(123) 456-7890</p>

truncate

truncates a string given a specified length, providing a custom string to denote an omission.
usage: | truncate: [length]: [suffix-optional]: [preserve-optinal]

$scope.text = 'lorem ipsum dolor sit amet';

<!--should not cut words in the middle if preserve is true-->
<p>{{ text | truncate: 7: '...': true }}</p>

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

<!--should not touch string that shorter than the provided length -->
<p>{{ text | truncate: 50: '...' }}</p>

<!--result:
lorem ipsum...
lorem ipsum d...
lorem ipsum dolor sit amet

split

truncates a string given a specified length, providing a custom string to denote an omission.
usage: | split: [delimiter]: [skip-optional]

$scope.text = 'lorem ipsum dolor sit amet';

<p>{{ text | split: ' ' }}</p>

<p>{{ text | split: ' ': 2}}</p>

<!--result:
['lorem', 'ipsum', 'dolor', 'sit', 'amet']
['lorem ipsum dolor', 'sit', 'amet']

reverse

Reverses a string

$scope.text = 'lorem ipsum dolor sit amet';

<p>{{ text | reverse }}</p>
<!--result:
tema tis rolod muspi merol

wrap

Wrap a string with another string
usage: string | wrap: string: string[optional]

<p>{{ 'foo' | wrap: '/' }}</p>
<p>{{ 'foo' | wrap: '{{': '}}' }}</p>
<!--result:
/foo/
{{foo}}

trim

Strip whitespace (or other characters) from the beginning and end of a string
usage: string | trim: chars[optional]

<p>{{ '    foo   ' | trim }}</p>
<p>{{ 'foobarfoo' | trim: 'foo' }}
<!--result:
foo
bar

ltrim

Strip whitespace (or other characters) from the beginning of a string
usage: string | ltrim: chars[optional]

<p>{{ 'barfoobar' | ltrim: 'bar' }}
<!--result:
foobar

rtrim

Strip whitespace (or other characters) from the end of a string
usage: string | rtrim: chars[optional]

<p>{{ 'barfoobar' | rtrim: 'bar' }}
<!--result:
barfoo

repeat

Repeats a string n times
Usage: string | repeat: n: separator[optional]

<p>{{ 'foo' | repeat: 3: '-' }}</p>
<!--repeat:
foo-foo-foo

test

Test if a string match a pattern
Usage: string | test: pattern: flag[optional]

<p>{{ '15/12/2003' | test: '^[0-9]{2}[/]{1}[0-9]{2}[/]{1}[0-9]{4}$': 'i' }}</p>
<p>{{ '0123456' | test: '\\D': 'i' }}</p>
<!--result:
true
true

match

Return an array of matched element in a string
Usage: string | match: pattern: flag[optional]

<p>{{ '15/12/2003' | match: '\\d+': 'g' }}</p>
<!--result:
['15', '12', '2003']

Math

max

max find and return the largest number in a given array.if an expression is provided, will return max value by expression.Usage: array | max: expression[optional]

$scope.users = [
  { user: { score: 988790 } },
  { user: { score: 123414 } },
  { user: { rank : 988999 } },
  { user: { score: 987621 } }
];

<p> {{ [1,2,3,4,7,8,9] | max }}</p>
<p> {{ users | max: 'user.score || user.rank' }}</p>
<!--
result:
* 9
* { user: { rank : 988999 } }

min

min find and return the lowest number in a given array.if an expression is provided, will return min value by expression.Usage: array | min: expression[optional]

$scope.users = [
  { user: { score: 988790 } },
  { user: { score: 123414 } },
  { user: { score: 987621 } }
];

<p> {{ [1,2,3,4,7,8,9] | min }}</p>
<p> {{ users | min: 'user.score' }}</p>
<!--
result:
* 1
* { user: { score: 123414 } }

abs

Returns the absolute value of a numberUsage: number | string

<div ng-repeat="val in [-2.2, 1.3, '-3.4', '4.5']">The absolute value of {{val}} is {{val | abs}}</div>
<!--
result:
* The absolute value of -1.2 is 1.2
* The absolute value of 2.3 is 2.3
* The absolute value of -3.4 is 3.4
* The absolute value of '4.5' is 4.5

percent

Percentage between two numbers
Usage: number | percent: total: round[optional], round by default false.

<p>{{ 23 | percent: 500 }}</p>
<p>{{ 23 | percent: 500: true }}</p>
<!--result:
4.6
4

radix

Converting decimal numbers to different bases(radix)
Usage: number | radix: base

<p>{{ 8 | radix: 2 }}</p>
<p>{{ 32586 | radix: 16 }}</p>
<!--result:
1000
7F4A

sum

Sum up all values within an array
Usage: array | sum: initial-value[optional]

{{ [2,3,5] | sum }}
{{ [2,3,5] | sum: 10 }}
<!--result
10
20

degrees

Converts radians into degrees
Usage: radians | degrees: round-to-decimal,

<p>{{ 0.785398 | degrees: 0 }}</p>
<p>{{ -1.57 | degrees: 3 }}</p>
<!--result
45
-89.954

radians

Converts degrees into radians
Usage: degrees | radians: round-to-decimal,

<p>{{ 45 | radians: 2 }}</p>
<p>{{ 180 | radians: 5 }}</p>
<!--result
0.79
3.14159

shortFmt

Converts numbers into formatted display
Usage: number | shortFmt: round-to-decimal,

<p>{{ 45000 | shortFmt: 0 }}</p>
<p>{{ 18234822 | shortFmt: 1 }}</p>
<!--result
45 k
18.2 m

byteFmt

Converts bytes into formatted display
Usage: number | byteFmt: round-to-decimal,

<p>{{ 1998 | byteFmt: 2 }}</p>
<p>{{ 1339234901 | byteFmt: 5 }}</p>
<!--result
1.95 KB
1.24726 GB

kbFmt

Converts kilobytes into formatted display
Usage: number | kbFmt: round-to-decimal,

<p>{{ 1024 | kbFmt: 0 }}</p>
<p>{{ 1049901 | kbFmt: 5 }}</p>
<!--result
1 MB
1.00126 GB

Boolean

Used for boolean expression in chaining filters

isGreaterThan

aliases: >

<div ng-show="{{ array | map | sum | isGreaterThan: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | >: num }}"></div>

isGreaterThanOrEqualTo

aliases: >=

<div ng-show="{{ array | map | sum | isGreaterThanOrEqualTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | >=: num }}"></div>

isLessThan

aliases: <

<div ng-show="{{ array | map | sum | isLessThan: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | <: num }}"></div>

isLessThanOrEqualTo

aliases: <=

<div ng-show="{{ array | map | sum | isLessThanOrEqualTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | <=: num }}"></div>

isEqualTo

aliases: ==

<div ng-show="{{ array | map | sum | isEqualTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | ==: num }}"></div>

isNotEqualTo

aliases: !=

<div ng-show="{{ array | map | sum | isNotEqualTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | !=: num }}"></div>

isIdenticalTo

aliases: ===

<div ng-show="{{ array | map | sum | isIdenticalTo: num }}"></div>
<!--or: -->
<div ng-show="{{ array | map | sum | ===: num }}"></div>

isNotIdenticalTo

aliases: !==

<div ng-show="{{ array | map | sum | isNotIdenticalTo: num }}"></div>
<!--or: -->
<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

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

使用案例

angular--filter的使用

一、在模板中使用 1.内置方法 /*currency:格式化数字为货币格式，默认为‘$’，保留2位小数*/ //用法 {{ num | currency}} {{ num | currency:'￥',1}} /*number:数字格式化，默认为添加千位符号（1,000）*/ {{ num | number}} {{ num | number:2}} //保留2位小数 /*date:日期格式
angular -filter过滤器金额处理加小数点后两位

function toDecimal2(x) { var f = parseFloat(x); if (isNaN(f)) { return false; } var f = Math.round(x*100)/100; var s = f.toString(); var
关于ng的过滤器的详细解释angular-filter

在使用ng框架做项目的时候，我们可能会使用到ng自带的过滤器，来进行数据的筛选一：ng自带的过滤器：currency ,date,limitTo,lowercase,uppercase,number,orderBy ,json,filter 过滤器有两种使用方法：第一种，页面是直接使用；第二种，js中使用以上的过滤器的使用时偏简单的，查看文档对你很有用这里，我们来讲解一下上面的简单中的很少
angular - filter(自定义)

angular自定义filter angular除了几个自带的常用的filter,还可以自定义filter,以满足不同的需求，简单研究了一下自定义filter，记录一下。有如下场景，后台返回的数据中，status可能是英文字符串，如果在html中使用if进行挨个判断，则显得有些啰嗦，这样我们就可以使用自定义的filter实现 javasc代码： var myapp = angular.
@angular-devkit

@sindresorhus/is import is from '@sindresorhus/is'; declare namespace is { const undefined: (value: any) => boolean; const string: (value: any) => boolean; const number: (value: any) => bo
angular-websocket学习笔记

主要记录在开发中使用angular-websocket的学习心得，如有错误请批评指正。 angular-websocket的开源库地址：https://github.com/gdi2290/angular-websocket 前言最近一直在学习开发一款物联网项目。（项目地址：https://blog.csdn.net/u013480581/article/details/80931778 ）通过
angular - 在Controller中使用filter

世界上并没有完美的程序，但是我们并不因此而沮丧，因为写程序就是一个不断追求完美的过程。 app.controller('TestController',function($scope, $filter){ $scope.time = $filter('timeFormat')('2021-03-17'); }
angular---rxjs

在angular中基础用法 import {Observable} from 'rxjs'; //导入rxjs模块 import { map, filter, scan } from 'rxjs/operators'; //按需导入需要的操作符 of(1, 2, 3) //创建一个可观察对象 .pipe( //通过pipe管道符来先处理数据 filter((value)=
Angular-管道/过滤器

angular的管道总体来说可以分为两种: 1、angular自带的管道，地址:https://angular.cn/api/common#pipes 2、自定义管道使用方法: (1)管道过滤体 import { Pipe, PipeTransform } from '@angular/core' // 使用的过程中要使用到name字段 @Pipe({ name: 'pipeNameChange
Angular - ng-repeat高级用法

ng-repeat高级用法：遍历数组： <li ng-repeat="item in array">{{item}}</li> 遍历对象： key：对象的key value：对象的value <li ng-repeat="(key,value) in obj">{{key}} | {{value}}</li> 绑定$$haskKey: 给每个item绑定唯
angular--controller与service

AngularJS中的控制器是一个函数，用来向视图的作用域中添加额外的功能。我们用它来给作用域对象设置初始状态，并添加自定义行为。服务提供了一种能在应用的整个生命周期内保持数据的方法，它能够在控制器之间进行通信，并且能保证数据的一致性。服务是一个单例对象，在每个应用中只会被实例化一次（被$injector实例化），并且是延迟加载的（需要时才会被创建）。服务提供了把与特定功能相关联的方法集中

angular-filter

Angular-filter

Angular 2 version is now available: ng-pipes

Table of contents:

Get Started

Collection

concat

unique

filterBy

first

last

flatten

join

fuzzy

fuzzyBy

groupBy

countBy

chunkBy

defaults

where

omit

pick

remove

removeWith

searchField

after

afterWhere

before

beforeWhere

reverse

isEmpty

contains

every

xor

toArray

map

pluck

range

String

ucfirst

uriEncode

uriComponentEncode

slugify

latinize

startsWith

endsWith

stripTags

stringular

phoneUS

truncate

split

reverse

wrap

trim

ltrim

rtrim

repeat

test

match

Math

max

min

abs

percent

radix

sum

degrees

radians

shortFmt

byteFmt

kbFmt

Boolean

isGreaterThan

isGreaterThanOrEqualTo

isLessThan

isLessThanOrEqualTo

isEqualTo

isNotEqualTo

isIdenticalTo

isNotIdenticalTo