AngularJS

Filters








What are filters?



a component providers that format data

build in

easy to extend your own

Declarative



use the | "pipe" character in the {{ }} binders
use : "colon" for specifying the arguments
can be chained

{{ amount | currency:"USD$" }}

Imperative



use directly in your JavaScript

have to inject the $filter service


$scope.name = $filter('uppercase')('supperman');

Build-in filters

currency

{{ expression | currency : symbol }}

date

{{ expression | date : format }}

filter 

{{ expression | filter : expression : comparator }}

json

{{ expression | json }}

limitTo

{{ expression | limitTo : limit}}

Build-in filters cont.


lowercase

{{ expression | lowercase}}

number

{{ expression | number : fractionSize}}

orderBy

{{ expression | orderBy : expression : reverse}}

uppercase

{{ expression | uppercase}}

Build your own


      angular.module('filters').filter('ctProperty', [
           function() {
                return function(item, property) {
                     return (property in item) ? item[property] : null;
                };
           }
      ]);

AngularJS Filters

By Kris Ivanov

AngularJS Filters

  • 1,123