MCQ

AngularJS Filters

In AngularJS, filters are used to format data. Following is a list of filters used for transforming data.

Filter	Description
Currency	It formats a number to a currency format.
Date	It formats a date to a specified format.
Filter	It select a subset of items from an array.
Json	It formats an object to a Json string.
Limit	It is used to limit an array/string, into a specified number of elements/characters.
Lowercase	It formats a string to lower case.
Number	It formats a number to a string.
Orderby	It orders an array by an expression.
Uppercase	It formats a string to upper case.

How to add filters to expressions

You can add filters to expressions by using the pipe character |, followed by a filter.

In this example, the uppercase filter format strings to upper case:

See this example:

 <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | uppercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "Sonoo",
    $scope.lastName = "Jaiswal"
});
</script>
</body>
</html>

Test it Now

Let's apply the lowercase filter into the same example:

See this example:

   <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ firstName | lowercase }}</p>
</div>
<script>
angular.module('myApp', []).controller('personCtrl', function($scope) {
    $scope.firstName = "Sonoo",
    $scope.lastName = "Jaiswal"
});
</script>
</body>
</html>

Test it Now

How to add filters to directives

Filters can be added to directives, like ng-repeat, by using the pipe character |, followed by a filter.

Let's take an example:

In this example, orderBy filter is used to sort an array.

See this example:

 <!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>	
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Looping with objects:</p>
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Ramesh',country:'India'},
        {name:'Alex',country:'USA'},
        {name:'Pooja',country:'India'},
        {name:'Mahesh',country:'India'},
        {name:'Iqbal',country:'Pakistan'},
        {name:'Ramanujam',country:'India'},
        {name:'Osama',country:'Iraq'},
        {name:'Johnson',country:'UK'},
        {name:'Karl',country:'Russia'}
        ];
});
</script>
</body>
</html>

Test it Now

The filter Filter

The filter Filter can only be used on arrays because it selects a subset of an array. It returns an array containing only the matching items.

Let's take an example:

This example will return the names that contain the letter "o".

See this example:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'o'">
    {{ x }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
'Ramesh',
'Pooja',
'Mahesh',
'Ramanujam',
'Osama',
'Iqbal',
'Karl',
'Johnson',
'Alex'
    ];
});
</script>
<p>This example displays only the names containing the letter "o".</p>
</body>
</html>

Test it Now

Filter an array based on user input

You can use the value of the input field as an expression in a filter by setting the ng-model directive on an input field.

See this example:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter:test">
    {{ x }}
  </li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Ramesh',
'Pooja',
'Mahesh',
'Ramanujam',
'Osama',
'Iqbal',
'Karl',
'Johnson',
'Alex'
   ];
});
</script>
<p>The list will only contain the names matching the filter.</p>
</body>
</html>

Test it Now

Sort an array based on user input

You can sort an array according to the table columns.

See this example:

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<p>Click the table headers to change the sorting order:</p>
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
       $scope.names = [
        {name:'Ramesh',country:'India'},
        {name:'Alex',country:'USA'},
        {name:'Pooja',country:'India'},
        {name:'Mahesh',country:'India'},
        {name:'Iqbal',country:'Pakistan'},
        {name:'Ramanujam',country:'India'},
        {name:'Osama',country:'Iraq'},
        {name:'Johnson',country:'UK'},
        {name:'Karl',country:'Russia'}
        ];

    $scope.orderByMe = function(x) {
        $scope.myOrderBy = x;
    }
});
</script>
</body>
</html>

Test it Now

AngularJS Custom Filters

You can create your own filters by register a new filter factory function with your module.

See this example:

<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <p>Click the table headers to change the sorting order:</p> <div ng-app="myApp" ng-controller="namesCtrl"> <table border="1" width="100%"> <tr> <th ng-click="orderByMe('name')">Name</th> <th ng-click="orderByMe('country')">Country</th> </tr> <tr ng-repeat="x in names | orderBy:myOrderBy"> <td>{{x.name}}</td> <td>{{x.country}}</td> </tr> </table> </div> <script> angular.module('myApp', []).controller('namesCtrl', function($scope) { $scope.names = [ {name:'Ramesh',country:'India'}, {name:'Alex',country:'USA'}, {name:'Pooja',country:'India'}, {name:'Mahesh',country:'India'}, {name:'Iqbal',country:'Pakistan'}, {name:'Ramanujam',country:'India'}, {name:'Osama',country:'Iraq'}, {name:'Johnson',country:'UK'}, {name:'Karl',country:'Russia'} ]; $scope.orderByMe = function(x) { $scope.myOrderBy = x; } }); </script> </body> </html>
Test it Now
Next TopicAngularJS Directives

← prev next →