Introduction:

Here we will explain to what is Filters in AngularJS or how to use Filters in AngularJS or How many types filter format Operator In AngularJS or how to format the value in upper case and lower case  with Example:


Description:

AngularJS Filters format the value of an expression for display to the userFilters can be added to expressions by using the pipe character | Following is the list of commonly used filters.

Name

Description

currency 

formats text in a currency format.

filter 

filter the array to a subset of it based on provided criteria.

lowercase 

Format a string to lower case.

orderBy 

Orders an array by an expression

uppercase 

Format a string to upper case

 

    • UPPERCASE FILTER
    • Ther uppercase filter to an expression using pipe character it format strings to upper case. Below we've added uppercase filter to print name in all capital letters.

Enter  Name: <input type="text" ng-model="User.Name">

Name in Upper Case: {{User.Name | uppercase}}

    • LOWERCASE FILTER
    • Ther lowercase  filter to an expression using pipe character it format strings to lower case. Below we've added lowercase filter to print name in all lowercase letters.

Enter  Name: <input type="text" ng-model="User.Name">

Name in Upper Case: {{User.Name | lowercase }}

  •      Currency filter

        The currency filter to an expression using pipe character it formats a number as currency. Below we've      added currency filter to print fee using currency format.

ENTER  AMOUNT: <INPUT TYPE="TEXT" NG-MODEL="USER.FEE">

FEES: {{USER.FEE | CURRENCY}}

    •      filter filters
    •      The filter filters selects a subset of an array List.The filter filters can only be used on arrays, and it          returns  an array containing only the matching records. . Below we've added Filter filters to display          only matching  records.

<b> Filter</b>

 <ul>

<li ng-repeat="user in User.users  |filter:User.Name">

{{ user.name + ', marks:' + user.marks }}

</li>

</ul>

  • orderby filter
  • The orderby filter can return an arrays, it is use for sorting array record. Below we've added orderby filter to display sorting records.

<b> OrderBy</b>

<ul>

<li ng-repeat="user in User.users  |orderBy:'marks'">

{{ user.name + ', marks:' + user.marks }}

</li>

</ul

Example

<script src="~/Scripts/jquery-3.1.1.js"></script>

<script src="~/Scripts/angular.js"></script>

<h2>AngularJS Application</h2>

<div ng-app="MyApp" ng-controller="MyController">

    Enter Name: <input type="text" ng-model="User.Name"><br><br>

    Enter Amount: <input type="text" ng-model="User.fee"><br><br>

    Name in Lower Case: {{User.Name | uppercase}} <br /> <br />

    Name in Lower Case: {{User.Name | lowercase}} <br /> <br /> 

    fees: {{User.fee | currency}}<br /> <br />

    <b> OrderBy</b>

    <ul>

        <li ng-repeat="user in User.users  |orderBy:'marks'">

            {{ user.name + ', marks:' + user.marks }}

        </li>

    </ul>

    <br /> <br />

    <b> Filter</b>

    <ul>

        <li ng-repeat="user in User.users  |filter:User.Name">

            {{ user.name + ', marks:' + user.marks }}

        </li>

    </ul>

</div>

<script>

    var mainApp = angular.module("MyApp", []);

    mainApp.controller('MyController', function ($scope) {

        $scope.User = {

            Name: "",

            fee: "",

            users: [

                  { name: 'aditya', marks: 70 },

                  { name: 'pawan', marks: 80 },

                  { name: 'suraj', marks: 65 }

            ],

        };

    });

</script>

Thanks.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like