Filters

Filters are used to format or transform data. Below is a list of common filters:

Filters with expressions

A filters can be added to an expression using the pipe character ( | ) and then followed by the filter name.

Open the module_demo.html file and change the HTML code to the following highlighted changes.

<script> 
angular.module('myApp',[]).controller('myCtrl', function($scope){
$scope.firstName = "Cornelius",
$scope.lastName = "Chopin"
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
  <p>My first name is {{firstName | uppercase}} {{lastName | lowercase}}</p>
</div>

NOTE: Notice that the first name is in all uppercase and the last name in in all lowercase even though the first and last names were written as Cornelius Chopin.

Filter With Expression Demo

Filters with directives

A filters can be added to a directive using the pipe character (|) and then followed by the filter name.

<script>
angular.module('myApp',[]).controller('myCtrl', function($scope){
$scope.familyMembers = [
{firstName:'Cornelius',lastName:'Chopin'},
{firstName:'Sheila',lastName:'Chopin'},
{firstName:'Joshua',lastName:'Chopin'},
{firstName:'Josiah',lastName:'Chopin'}];
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">
  <p>Order by first name:</p>
    <ul>
      <li ng-repeat="x in familyMembers | orderBy:'firstName'">
      {{x.firstName + ' ' + x.lastName}}
      </li>
    </ul>
</div>
Filter With Directive Demo

Here is an example of the currency filter.

<script>
var app = angular.module('myApp',[]);
app.controller('priceCtrl', function($scope) {
$scope.price = 88;
});
</script>

<div ng-app="myApp" ng-controller="priceCtrl">
  <h1>Price: {{price | currency}}</h1>
</div>

NOTE: The result is $88.00. Notice that the filter added the dollar sign ($) on the front of the number AND a period and two zeros on the end of the number (.00).

Filter: Currency Filter Demo

The filter filter will, well, “filter” a subset of an array based on some criteria and return a result if a match is found:

<script>
angular.module('myApp',[]).controller('filterCtrl',function($scope){
$scope.names = ['Cornelius','Sheila','Joshua','Josiah'];
});
</script>

<p>Filter only names with the letters "Jos" in them.</p>
<div ng-app="myApp" ng-controller="filterCtrl">
  <ul>
    <li ng-repeat="x in names | filter : 'Jos'">{{x}}</li>
  </ul>
</div>
Filter: Filter Filter Demo

Filter an Array

Use can filter an array based on user input by setting the ng-model directive on an input field as an expression in a filter. Here, we’ll create a search field:

<script>
angular.module('myApp',[]).controller('searchCtrl', function($scope){
$scope.names = ['Cornelius','Sheila','Joshua','Josiah'];
});
</script>

<div ng-app="myApp" ng-controller="searchCtrl">
  <p>Type a search word:</p>
  <p><input type="text"  ng-model="searchword"></p>
  <ul>
    <li ng-repeat="x in names | filter:searchword">{{x}}</li>
  </ul>
</div>
Filter: Filter An Array Demo

NOTE: Notice that a shorthand syntax was used for the script. However, both works the same—it's a preference on how you want to write it. 

angular.module('myApp', []).controller('searchCtrl',function($scope){
$scope.names = ['Cornelius','Sheila','Joshua','Josiah'];
});

Instead of this:

var myApp = angular.module('myApp',[]);
myApp.controller('searchCtrl',function($scope){
$scope.names = ['Cornelius','Sheila','Joshua','Josiah'];
});

NOTE: Changes are highlighted in  bold.

Sort an Array

An array can be sorted by adding an ng-click directive to the table headers:

<script>
angular.module('myApp',[]).controller('sortCtrl',function($scope){
$scope.cities = [
{city:'Austin',state:'Texas'},
{city:'Dallas',state:'Texas'},
{city:'Houston',state:'Texas'},
{city:'Baton Rouge',state:'Louisiana'},
{city:'New Orleans',state:'Louisiana'},
{city:'Lake Charles',state:'Louisiana'},
{city:'Miami',state:'Florida'},
{city:'Tampa Bay',state:'Florida'}];        
$scope.orderByMe = function(x){
$scope.myOrderBy = x;
}
});
</script>

<p>Click a table header to sort that column:</p>
<table ng-app="myApp" ng-controller="sortCtrl" border="1" width="50%" style="border-collapse:collapse">
  <tr>
    <th ng-click="orderByMe('city')">City</th>
    <th ng-click="orderByMe('state')">State</th>
  </tr>
  <tr ng-repeat="x in cities | orderBy:myOrderBy">
    <td>{{x.city}}</td>
    <td>{{x.state}}</td>
  </tr>
</table>
Filter: Sort An Array Demo

Custom Filter

UPDATE TO CREATE MY OWN CUSTOM FUNCTION IN RED
You can create a custom filter by registering a new filter factory function. In the example below, the myFormat filter will format every other character to uppercase.

<script>
var app = angular.module('myApp',[]);

app.controller('myCtrl', function($scope) {
$scope.familyMembers = ['Cornelius','Sheila','Joshua','Josiah'];
});

app.filter('myCustomFilter', function(){
return function(x){
var i, c, txt = "";
for (i = 0; i < x.length; i++){
c = x[i];
if (i % 2 == 0){
c = c.toUpperCase();
}
txt += c;
}
return txt;
};
});

</script>

<ul ng-app="myApp" ng-controller="myCtrl">
  <li ng-repeat="x in familyMembers">{{x | myCustomFilter}}</li>
</ul>
Filter: Custom Filter Demo