We looked at View Model, View and Controller concepts in the previous post. Now we are going to discuss about the AngularJS Filters.
Contents
AngularJS Filter Concepts
Filters are used to format the value of an expression for display to the user. They can be added to templates, controllers, directives or services and you can also define your own filters. Using filters, Angular lets you organize data, so that it only displays data if it meets certain criteria.
We use pipe ( | ) character to add angular filters. We will see the use of filters in the Angular Filters in Action section.
The following table briefly describes the commonly used Angular Filters.
AngularJS Filters in Action
We will see the use of Angular filters in this section.
Uppercase and Lowercase
The following example demonstrates the use of uppercase and lowercase filters in AngularJS.
filter-case.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <title> Filter - Uppercase and Lowercase</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-app="" ng-controller="BlogController"> Name: <input type="text" ng-model="name"><br> Blog Name: <input type="text" ng-model="blogName"><br> <br> Name: {{name | uppercase}} <br> Blog Name : {{blogName | lowercase}} </div> <script src="blogController.js"></script> </body> </html> |
The following Controller is used in this example. We set the initial state of the scope by attaching the properties with upper and lowercase letters.
blogController.js
|
1 2 3 4 5 6 |
function BlogController($scope) { $scope.name = "pankaj kumar", $scope.blogName = "JOURNAL DEV" } |
Currency
The following example demonstrates the use of currency filter in AngularJS.
filter-currency.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html ng-app> <head> <title> Angular Filter - Currency</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-controller="currencyController"> Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price"> <p> Toal Default = {{ (quantity * price) | currency }}</p> <p>Total in INR = {{ (quantity * price) | currency :"INR " }}</p> </div> <script src="currencyController.js"></script> </body> </html> |
The following Controller is used in this example. We set the initial state of the scope by attaching the properties quantity and price with values 1 and 10 respectively.
currencyController.js
|
1 2 3 4 5 6 |
function currencyController($scope) { $scope.quantity = 1; $scope.price = 10; } |
You will see the following output in your browser. The default currency format is in USD($).
Using orderby and filter
The following example demonstrates the use of angular filters like orderby and filter. We use orderby filter to order the players array by the given expression. In this example, we use name to order the players array. It is ordered alphabetically for strings and numerically for numbers.
We use filter to select a subset of items from players array of objects and returns a new array which matches the filter expression. In this example you can see how filter works as you type.
filter-orderby.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html ng-app=""> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> </head> <body> <div ng-controller="playerController"> Name:<input type="text" ng-model="filterName"/> <ul> <li ng-repeat="player in players |filter:filterName | orderBy:'name'"> {{ player.name + ' : ' + player.country }} </li> </ul> </div> <script src="playerController.js"></script> </body> </html> |
We use the following controller in the above example.
playerController.js
|
1 2 3 4 5 6 7 8 |
function playerController($scope) { $scope.players = [ {name:'Elano Blumer',country:'Brazil'}, {name:'David James',country:'England'}, {name:'Iain Hume',country:'Canada'} ]; } |
You will see the following output in your browser. You can type in the input field to filter the list.
Using limitTo
We use limitTo filter to create a new array or string containing only a specified number of elements. The following example demonstrates the use of limitTo filter
filter-limit.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html ng-app> <head> <title>Angular Filter - limiTo</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script> </head> <body> <div ng-controller="limitController"> Defined Array of Numbers: {{numbers}}<br> <br>Limit to: <input type="integer" ng-model="limit"> <p>Array after limiting to {{limit}} numbers : {{ numbers | limitTo:limit }}</p> <p>{{xss}}</p> </div> </body> <script src="limitController.js"></script> </html> |
We use the following controller in our example.
limitController.js
|
1 2 3 4 5 6 |
function limitController($scope) { $scope.numbers = [10,20,30,40,50,60,70,80,90,100]; $scope.limit = 5; } |
You will see the following output in your browser.
You can try using the Angular Filters alone or in combinations depending on your requirements. That’s all for AngularJS filters and you will see more angular features in the coming posts.