AngularJS — Filters

Built-in Filters

Filter	Description
uppercase	Convert to uppercase
lowercase	Convert to lowercase
currency	Format as currency
number	Format as number
date	Format date
json	Format as JSON
limitTo	Limit array/string
filter	Filter array
orderBy	Sort array

Usage in Templates

<p>{{name | uppercase}}</p>
<p>{{price | currency:'$'}}</p>
<p>{{today | date:'yyyy-MM-dd'}}</p>
<p>{{data | json}}</p>
<p>{{list | limitTo:5}}</p>

Filter with ng-repeat

<input ng-model="searchText">
<ul>
  <li ng-repeat="item in items | filter:searchText | orderBy:'name'">
    {{item.name}}
  </li>
</ul>

Custom Filter

app.filter('capitalize', function() {
  return function(input) {
    if (!input) return '';
    return input.charAt(0).toUpperCase() + input.slice(1);
  };
});

<p>{{name | capitalize}}</p>

Filter in Controller

app.controller('MyController', function($scope, $filter) {
  $scope.name = 'john';
  $scope.uppercaseName = $filter('uppercase')($scope.name);
});

Mini Practice

1. Use built-in filters
2. Apply multiple filters
3. Create a custom filter
4. Use filters in controllers

Up Next

Continue with Custom Filters — creating custom filters.