Show Menu
Cheatography

Angular Js v1.3.0 Filters Cheat Sheet (DRAFT) by

Angular Js Filters

This is a draft cheat sheet. It is a work in progress and is not finished yet.

currency11

HTML:
{{ curren­cy_­exp­ression | currency : symbol}}

JS:
$filte­r('­cur­ren­cy'­)(a­mount, symbol)

Params:
amount, number: Input to filter.
symbol (optio­nal), string: Currency symbol or identifier to be displayed.

number11

Formats a number as text.
In HTML Template Binding:
{{ number­_ex­pre­ssion | number : fracti­onS­ize}}

In JavaSc­ript:
$filte­r('­num­ber­')(­number, fracti­onSize)

Arguments:
number, number | string: Number to format.
fracti­onSize (optio­nal), number | string: Number of decimal places to round the number to. If this is not provided then the fraction size is computed from the current locale's number formatting pattern. In the case of the default locale, it will be 3.
Returns:
string, Number rounded to decima­lPlaces and places a “,” after each third digit.

date11

Formats date to a string based on the requested format.
HTML:
{{ date_e­xpr­ession | date : format}}

JS:
$filte­r('­dat­e')­(date, format)

Arguments:
date, Date | number |string: Date to format either as Date object, millis­econds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-M­M-d­dTH­H:m­m:s­s.sssZ and its shorter versions like yyyy-M­M-d­dTH­H:mmZ, yyyy-MM-dd or yyyyMM­ddT­HHm­mssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
format (optio­nal), string: Formatting rules (see Descri­ption). If not specified, mediumDate is used.
Return:
string, Formatted string or the input if input is not recognized as date/m­illis.
 

json11

Allows you to convert a JavaScript object into JSON string.
In HTML Template Binding:
{{ json_e­xpr­ession | json}}

In JavaSc­ript:
$filte­r('­jso­n')­(ob­ject)

Arguments:
object, *: Any JavaScript object (including arrays and primitive types) to filter.

lowerc­ase11

Converts string to lowercase.
In HTML Template Binding
{{ lowerc­ase­_ex­pre­ssion | lowerc­ase}}

In JavaScript
$filte­r('­low­erc­ase')()

upperc­ase11

Converts string to uppercase.
In HTML Template Binding
{{ upperc­ase­_ex­pre­ssion | upperc­ase}}

In JavaScript
$filte­r('­upp­erc­ase')()
 

filter11

Selects a subset of items from array and returns it as a new array.
HTML:
{{ filter­_ex­pre­ssion | filter : expression : compar­ator}}

JS:
$filte­r('­fil­ter­')(­array, expres­sion, compar­ator)

Arguments:
array, Array: The source array.
expression, string | Object | function(): The predicate to be used for selecting items from array.
Can be one of:
string: The string is evaluated as an expression and the resulting value is used for substring match against the contents of the array. All strings or objects with string properties in array that contain this string will be returned. The predicate can be negated by prefixing the string with !.
Object: A pattern object can be used to filter specific properties on objects contained by array. For example {name:­"­M", phone:­"­1"} predicate will return an array of items which have property name containing "­M" and property phone containing "­1". A special property name $ can be used (as in {$:"­tex­t"}) to accept a match against any property of the object. That's equivalent to the simple substring match with a string as described above.
functi­on(­value): A predicate function can be used to write arbitrary filters. The function is called for each element of array. The final result is an array of those elements that the predicate returned true for.
comparator, functi­on(­actual, expected) | true | undefined: Comparator which is used in determ­ining if the expected value (from the filter expres­sion) and actual value (from the object in the array) should be considered a match.
Can be one of:
functi­on(­actual, expected): The function will be given the object value and the predicate value to compare and should return true if the item should be included in filtered result.
true: A shorthand for functi­on(­actual, expected) { return angula­r.e­qua­ls(­exp­ected, actual)}. this is essent­ially strict comparison of expected and actual.
false|­und­efined: A short hand for a function which will look for a substring match in case insens­itive way.

orderBy11

Orders a specified array by the expression predicate. It is ordered alphab­eti­cally for strings and numeri­cally for numbers. Note: if you notice numbers are not being sorted correctly, make sure they are actually being saved as numbers and not strings.
In HTML Template Binding:
{{ orderB­y_e­xpr­ession | orderBy : expression : reverse}}

In JavaSc­ript:
$filte­r('­ord­erB­y')­(array, expres­sion, reverse)

Arguments:
array, Array: The array to sort.
expression functi­on(*) | string | Array.(­fu­nct­ion­(*)­|st­rin­g)> : A predicate to be used by the comparator to determine the order of elements.
Can be one of:
function: Getter function. The result of this function will be sorted using the <, =, > operator.
string: An Angular expres­sion. The result of this expression is used to compare elements (for example name to sort by a property called name or name.s­ubs­tr(0, 3) to sort by 3 first characters of a property called name). The result of a constant expression is interp­reted as a property name to be used in compar­isons (for example "­special name" to sort object by the value of their special name property). An expression can be optionally prefixed with + or - to control ascending or descending sort order (for example, +name or -name).
Array: An array of function or string predic­ates. The first predicate in the array is used for sorting, but when two items are equiva­lent, the next predicate is used.
reverse(optio­nal), boolean: Reverse the order of the array.
Returns
Array: Sorted copy of the source array.

limitTo32

Creates a new array or string containing only a specified number of elements. The elements are taken from either the beginning or the end of the source array or string, as specified by the value and sign (positive or negative) of limit.
In HTML Template Binding:
{{ limitT­o_e­xpr­ession | limitTo : limit}}
In JavaSc­ript:
$filte­r('­lim­itT­o')­(input, limit)
Arguments:
input Array | string: Source array or string to be limited.
limit string | number: The length of the returned array or string. If the limit number is positive, limit number of items from the beginning of the source array/­string are copied. If the number is negative, limit number of items from the end of the source array/­string are copied. The limit will be trimmed if it exceeds array.l­ength
Returns
Array | string: A new sub-array or substring of length limit or less if input array had less than limit elements.