AngularJS Filters,How to Filters

AngularJS Filters,How to Filters

Type of Filters
1 uppercase converts a text to upper case text like ABCD.
2 lowercase converts a text to lower case text like abcd.
3 currency formats text in a currency format like $ 500 Rs 200.
4 filter filter the array to a subset of it based on provided criteria.
5 orderby orders the array based on provided criteria change or sort by asc and desc according to provide value.

Change in Uppder case using AngularJs filter

    Enter  name:<input type="text" ng-model="user.name">
    Enter  Email: <input type="text" ng-model="user.email">
    Name in Upper Case: {{user.mydetial() | uppercase}}

Change in lowercase case using AngularJs filter

    Enter  name:<input type="text" ng-model="user.name">
    Enter  Email: <input type="text" ng-model="user.email">
    Name in Upper Case: {{user.mydetial() | lowercase}}

Change currency filter

    Enter fees: <input type="text" ng-model="user.fees">
    fees: {{user.fees | currency}}

Keyword Filter of array and object

   Enter keyword: <input type="text" ng-model="subjectName">
    Subject:
    <ul>
      <li ng-repeat="user in user.subjects | filter: subjectName">
        {{ subject.name + ', marks:' + subject.marks }}
      </li>
    </ul>

orderby Filter of array and object

    Subject:
    <ul>
      <li ng-repeat="subject in student.subjects | orderBy:'marks'">
        {{ subject.name + ', marks:' + subject.marks }}
      </li>
    </ul>

Filteration Example

            <html>
            <head>
            <title>Angular JS Filters</title>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
            </head>
            <body style="background-color:#FFCCFF;">
            <h2>Angular JS Filters Example</h2>
            <div ng-app="mainApp" ng-controller="userController">
            <table border="0">
            <tr><td>Enter  name:</td><td><input type="text" ng-model="user.name"></td></tr>
            <tr><td>Enter Email: </td><td><input type="text" ng-model="user.email"></td></tr>
            <tr><td>Enter fees: </td><td><input type="text" ng-model="user.fees"></td></tr>
            <tr><td>Filter key word: </td><td><input type="text" ng-model="subjectName"></td></tr>
            </table>
            <br/>
            <table border="0">
            <tr><td>Name in Upper Case: </td><td>{{user.mydetial() | uppercase}}</td></tr>
            <tr><td>Name in Lower Case: </td><td>{{user.mydetial() | lowercase}}</td></tr>
            <tr><td>fees: </td><td>{{user.fees | currency}}</td></tr>
            <tr><td>Subject:</td><td>
            <ul>
               <li ng-repeat="subject in user.subjects | filter: subjectName |orderBy:'marks'">
                  {{ subject.name + ', marks:' + subject.marks }}
               </li>
            </ul>
            </td></tr>
            </table>
            </div>
            <script>
            var mainApp = angular.module("mainApp", []);
            
            mainApp.controller('userController', function($scope) {
               $scope.user = {
                  name: "Pramod",
                  email: "Kumawat@gmail.com",
                  fees:500,
                  subjects:[
                     {name:'Physics',marks:70},
                     {name:'English',marks:85},
                     {name:'Bio',marks:95},
                     {name:'Chemistry',marks:80},
                     {name:'Math',marks:65}
                     
                  ],
                  mydetial: function() {
                     var userObject;
                     userObject = $scope.user;
                     return userObject.name + " " + userObject.email;
                  }
               };
            });
            </script>
            </body>
            </html>
Angularjsfilteration

Angularjsfilteration

Share Button

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Author: pramod kumar kumawat Mob: 9269727062
Free WordPress Themes - Download High-quality Templates