AngularJS filters:
AngularJS filters are used to format the data. AngularJS filters can be added to expressions and directives using pipe character |.
Syntax:
{{ expression | filter }} |
In case of multiple filters:
{{ expression | filter1 | filter2 }} |
Commonly used AngularJS filters:
Currency: It is used to format a number to a currency format.
Date: It is used to format a date to a specified format.
Filter: It is used to select a subset of items from an array.
Json: It is used to format an object to a JSON string.
limitTo: It is used to limits an array or string, into a specified number of elements or characters.
Lowercase: It is used to format a string to lower case.
Number: It is used to format a number to a string.
orderBy: It is used to orders an array by an expression.
Uppercase: It is used to format a string to upper case.
Example:
<html> <head> <title>AngularJS Filters Example</title> <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"> </script> </head> <body> <h2>AngularJS Filters Example</h2> <div ng-app = "testApp" ng-controller = "appController"> <table border = "0"> <tr> <td>Enter first name:</td> <td><input type="text" ng-model="student.firstName"/> </tr> <tr> <td>Enter last name: </td> <td><input type="text" ng-model="student.lastName"/> </tr> <tr> <td>Enter fees: </td> <td><input type="text" ng-model="student.fees"/> </tr> <tr> <td>Enter subject: </td> <td><input type="text" ng-model="subjectName"/> </tr> </table> <br/> <table> <tr> <td>Name in Upper Case: </td> <td>{{student.fullName() | uppercase}}</td> </tr> <tr> <td>Name in Lower Case: </td> <td>{{student.fullName() | lowercase}}</td> </tr> <tr> <td>fees: </td><td>{{student.fees | currency}} </td> </tr> <tr> <td>Subject:</td> <td> <ul> <li ng-repeat = "subject in student.subjects | filter: subjectName |orderBy:'marks'"> {{ subject.name + ', marks:' + subject.marks }} </li> </ul> </td> </tr> </table> </div> <script> var mainApp = angular.module("testApp", []); mainApp.controller('appController', function($scope) { $scope.student = { firstName: "Nidhi", lastName: "Gupta", fees:600, subjects:[ {name:'Java',marks:90}, {name:'Data Structure',marks:80}, {name:'Networking',marks:85} ], fullName: function() { var studentObject; studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); </script> </body> </html> |
Try it: