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