CodesJava

Easy learning with example program codes

angularjs filter tutorial


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:

AngularJS Filters Example on jsbin.com
 



Industrial Training

We offers Placement Oriented Training on Java, Spring, JSF, Hibernate, PHP, AngularJS, Angular 4, PLSQL, Oracle BI Publisher etc. We also provides Online training, please mail us at hr@codesjava.com.

Development

We also provides the Development services for Website Development , Java Development, PHP Development, Android App Development etc. You can contact us on hr@codesjava.com.

Copyright © 2019 CodesJava DMCA.com Protection Status SiteMap Reference: Java Wiki