AngularJS Filters

You can modify the data stored in application variables via AngularJS filters. Pipe character is used to add a filter to any expression. Following are the most frequently used AngularJS filters.

Uppercase
Lowercase
Currency
Filter
OrderyBy

Let’s have a look at each of the aforementioned AngularJS filters in detail

Uppercase and Lowercase

These filters change the case of a string. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="">
 	<p>Car Name: <input type="text" ng-model="carname"></p>
    
 	<p ng-bind="carname | uppercase"></p>
    <p ng-bind="carname | lowercase"></p>
</div>

</body>
</html>

Download the code Try the code

Open the above page in the browser. You should see a text box. Type anything in the text box. The text you entered shall appear twice below the text box in upper as well as in lower case. Now take a look at your code. We have an application variable “carname” bound to input of text box. Next, we have two paragraphs. In the first paragraph we use ng-bing directive to bind “carname” variable to inner html of the paragraph. Inside the ng-bind directive we mentioned application variable followed by pipe character and the filter i.e. “uppercase”. Similarly, in the next paragraph we used the “lowercase” filter to change the case of the paragraph to lowercase.

Currency Filter

Currency filters prefix currency symbol with the number type data. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="">
 	<p>Car Price: <input type="text" ng-model="carprice"></p>
    
 	{{carprice | currency}}
</div>

</body>
</html>

Download the code Try the code

Now, if you open the above page in browser, you should see a text box. Start entering number values in the text box. You shall see the numbers with currency symbol prefixed in the paragraph below the text box. If you enter characters, you shall see that the text disappears. This is because we have used currency symbol and the paragraph accepts a number.

Filter Filters

Filter filters are only applicable on arrays. They are used to filter array elements based upon a specified criteria. Take a look at the following example to understand these filters.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="colors=['red','green','blue','yellow']">
 	
    <ul>
      <li ng-repeat="x in colors | filter : 'l'">
        {{ x }}
      </li>
    </ul>
    
</div>
    

</body>
</html>

Download the code Try the code

The above filter will filter all the colors with letter “l” from the colors array.

Order By Filter

You can use order by operator to arrange items in ascending order. In the following example the orderBy filter sorts the items in the color array in alphabetical order. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="colors=['red','green','blue','yellow']">
 	
    <ul>
      <li ng-repeat="x in colors | orderBy:'toString()'">
        {{ x }}
      </li>
    </ul>
    
</div>
    

</body>
</html>

Download the code Try the code

<<< AngularJS ScopesAngularJS Services >>>