Coleção AngularJs Meetup South London | Este artigo

Os filtros são muito úteis para formatar os dados exibidos para o usuário. Casos de uso comuns são moeda, datas e números. Outros filtros menos comuns são: maiúsculas, minúsculas, limitTo, orderBy e json.

Injetar um filtro

var $filter = angular.injector(['ng', 'app']).get('$filter');

Filtros comuns

console.log( $filter('currency')(2000) ); // $2,000.00
console.log( $filter('date')(new Date(), 'yyyy') ); // 2014
console.log( $filter('number')(1/3, 2) ); // 0.33

console.log( $filter('uppercase')("Hello") ); // HELLO
console.log( $filter('lowercase')("HELLO") ); // hello
console.log( $filter('limitTo')([1,2,3], 2) ); // [1,2]
console.log( $filter('limitTo')([1,2,3], -2) ); // [2,3]
console.log( $filter('limitTo')("Hello", 2) ); // He
console.log( $filter('limitTo')("Hello", -2) ); // lo

console.log( $filter('orderBy')([{id:1},{id:2},{id:3}], "-id") ); 
// [{id:3}, {id:2}, {id:1}]

console.log( $filter('json')({a:1}) ); // { "a" : 1 }

Uso de filtro básico

HTML: <span>{{ employee.name | uppercase }}</span>
Angular Expression: <span ng-bind="employee.name | uppercase"></span>
Code: $filter('uppercase')(employee.name);

Filtros usando parâmetro

HTML: <span>{{ employee.feedback | number : 2 }}</span>
Angular Expression: <span ng-bind="employee.feedback | number : 2"></span>
Code: $filter('number')(employee.feedback, 2);

Filtros em cadeia

HTML: <span>{{ employee.name | limitTo : 3 | lowercase }}</span>
Angular Expression: <span ng-bind="employee.name | limitTo : 3 | lowercase"></span>
Code: var result = $filter('limitTo')(employee.name, 3);
           $filter('lowercase')(result);

Composição do filtro de expressão (dentro de repetição de ng)

Você pode compor várias expressões de filtro usando parênteses ( object | filter : param ) + ( object | filter : param )

HTML: <span>{{ (employee.name | limitTo : 3 | lowercase) + $index }}</span>
Angular Expression: <span ng-bind="(employee.name | limitTo : 3 | lowercase) + $index"></span>

Código de demonstração: link

Coleção AngularJs Meetup South London | Este artigo