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

Change in lowercase case using AngularJs filter

    Enter  name:<input type="text" ng-model="">
    Enter  Email: <input type="text" ng-model="">
    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">
      <li ng-repeat="user in user.subjects | filter: subjectName">
        {{ + ', marks:' + subject.marks }}

orderby Filter of array and object

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

Filteration Example

            <title>Angular JS Filters</title>
            <script src=""></script>
            <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=""></td></tr>
            <tr><td>Enter Email: </td><td><input type="text" ng-model=""></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 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>
               <li ng-repeat="subject in user.subjects | filter: subjectName |orderBy:'marks'">
                  {{ + ', marks:' + subject.marks }}
            var mainApp = angular.module("mainApp", []);
            mainApp.controller('userController', function($scope) {
               $scope.user = {
                  name: "Pramod",
                  email: "",
                  mydetial: function() {
                     var userObject;
                     userObject = $scope.user;
                     return + " " +;


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