AngularJS Extras Package Filters Usage

Home / Packages / AngularJS Extras

---

Table of Contents AngularJS Extras - Filters Usage Filters age gravatar isArray luxon Examples Parameters map math moment Examples Parameters numeral Examples Parameters reduce toArray truncate

AngularJS Extras - Filters Usage

Filters are intended for usage within `ng-bind` and `{{ }}` assignments.

All widgets are actively under heavy development and options/usages are subject to possible changes.

---

Filters

age

gravatar

isArray

luxon

Available in versions ^0.14.0

A modern replacement for Moment.

Examples

<span data-ng-bind="scope.dateTime  | luxon:{unix:false, format:'h:mm a', tz:options.timeZone}"></span>

Parameters

Attribute	Type	Default	Description
unix	boolean	true	If true, filter expects the supplied number to be a unix timestamp in seconds
since	boolean	false	If true, formats the wording to be in past tense, with the time difference between then and now. E.g. "an hour". If in the past, "ago" is used
diff	number datetime		Difference between two dates (as a number)
relative	string	'1w'
duration	string	'days'	Used with 'diff' to display the incremental between: seconds, minutes, hours, days, weeks, months, years
format	string	'LLL d yyyy, h:mma'	The format in which to display (if not using `since`. Formats can be found at https://moment.github.io/luxon/#/formatting?id=table-of-tokens.
tz	string	local	The timezone to display in

map

math

moment

Being replaced with Luxon.

Examples

<span data-ng-bind="scope.dateTime  | moment:{unix:false, format:'h:mm a', tz:options.timeZone}"></span>

Parameters

Attribute	Type	Default	Description
unix	boolean	true	If true, filter expects the supplied number to be a unix timestamp in seconds
since	boolean	false	If true, formats the wording to be in past tense, with the time difference between then and now. E.g. "an hour"
ago	boolean	true	Supplemental option to work the `since` (e.g. only if `since` is enabled). Adds 'ago' to wording, such as "44 seconds ago"
diff	number datetime		Difference between two dates (as a number)
from	number datetime		Difference between two dates (with human grammar)
relative	string	'1w'
duration	string	'days'	Used with 'diff' to display the incremental between: seconds, minutes, hours, days, weeks, months, years
format	string	'MMM Do YYYY, h:mma'	The format in which to display (if not using `since`. Formats can be found at https://momentjs.com/docs/#/displaying/format/.
tz	string		The timezone to convert from

numeral

Available in versions ^0.8.0

Used by adding `numeral` filter to a binding assignment, this directive is useful for altering the number format of the specified value. Some notable contains abbreviation features for display.

Examples

With a scope.value being `1234567`, this display would output `1.2m`

<span>{{ scope.value | numeral }}</span>

With a scope.value being `1234567`, this display would output `$1.2m`

<span ng-bind="scope.value | numeral:{format:'$0[.]0a'}"></span>

With a scope.value being `1234567`, this display would output `1.23m`

<span ng-bind="scope.value | numeral:{maxDecimals:2}"></span>

Parameters

Attribute	Type	Default	Description
maxDecimals	number	1	If using the default `format`, this will set the maximum number of decimal spaces allowed in the output. Defaults to 1.
format	string	'0[.]0a'	Set a specific numeric output format to display. All possible formatting options can be found at http://numeraljs.com/#format

reduce

toArray

truncate