Filters in AngularJS with example and Demo.

In Order to modify the data filters are used in AngularJS. This can be used in the expression with a pipe symbol. There are some predefined filters in AngularJS such as,

  • Currency
  • Number
  • Date
  • Json
  • Lowercase
  • Uppercase
  • limitTo
  • orderBy

 

Demo for filter - uppercase

Enter your name:
Name as UpperCase: {{user.funName() | uppercase}}

Demo for filter - currency

Enter currency value:
Money value as currency format: {{user.money | currency}}

Example 1 - AngularJS filter for uppercase:
_________________________________
 
<html>
   <head>
      <title>Filters - AngularJS</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
 
   <body>
      <h2>AngularJS Sample Application</h2>
      <div ng-app = "myApp" ng-controller = "myController">
               <span>Enter your name:</span>
               <span><input type = "text" ng-model = "user.name"></span>
         <br/>
         <div><span>Name in Upper Case: </span><span>{{user.funName() | uppercase}}</span></div>
      </div>
 
      <script>
         var myApp = angular.module("myApp", []);
         myApp.controller('myController', function($scope) {
            $scope.user = {
               name: "userx",
               funName: function() {
                  var studentObject;
                  studentObject = $scope.user;
                  return studentObject.name;
               }
            };
         });
      </script>
   </body>
</html>
Example 2 - AngularJS filter for currency:
_______________________________
 
<html>
   <head>
      <title>Filters - AngularJS</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </head>
 
   <body>
      <div ng-app = "myApp" ng-controller = "myController">
               <span>Enter currency value:</span>
               <span><input type = "text" ng-model = "currency.val"></span>
         <br/>
         <div><span>Money value as currency format: </span><span>{{currency.val | currency}}</span></div>
      </div>
 
      <script>
         var myApp = angular.module("myApp", []);
         myApp.controller('myController', function($scope) {
            $scope.currency = {
               val: 1000000,
            };
         });
      </script>
   </body>
</html>
Category: