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.
Let’s have a look at each of the aforementioned AngularJS filters in detail
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>
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 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>
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 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>
The above filter will filter all the colors with letter “l” from the colors array.
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>