AngularJS — Custom Filters

Basic Custom Filter

app.filter('truncate', function() {
  return function(input, length) {
    if (!input) return '';
    if (input.length <= length) return input;
    return input.substring(0, length) + '...';
  };
});

<p>{{longText | truncate:50}}</p>

Filter with Parameters

app.filter('formatDate', function() {
  return function(input, format) {
    if (!input) return '';
    var date = new Date(input);
    if (format === 'short') {
      return date.toLocaleDateString();
    }
    return date.toISOString().split('T')[0];
  };
});

<p>{{myDate | formatDate:'short'}}</p>

Filter in Controller

app.controller('MyController', function($scope, $filter) {
  $scope.items = [
    { name: 'Apple', price: 1.5 },
    { name: 'Banana', price: 0.75 }
  ];
  
  $scope.filteredItems = $filter('filter')($scope.items, { name: 'Apple' });
});

Filter Chain

<p>{{name | uppercase | truncate:10}}</p>
<p>{{price | currency:'€' | number:2}}</p>

State Filter

app.filter('stateFilter', function() {
  return function(input, state) {
    if (!state) return input;
    return input.filter(function(item) {
      return item.state === state;
    });
  };
});

Mini Practice

1. Create a truncate filter
2. Add parameters
3. Use filters in controllers
4. Chain multiple filters

Up Next

Continue with HTTP — making HTTP requests.