Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Filters In AngularJs

    @siddharth.sindhi
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 318
    Comment on it

    AngularJs provides a number of filters.Filters Are added to format data or to transform it. It is added to the expressions by using the pipe character '|' followed by a filter.

    Some of the AngularJs filters are:

    • uppercase
    • lowercase
    • orderBy
    • currency
    • filter

    Uppercase:

    This filter formats the string to uppercase or in simple words we can say that it converts the string to the uppercase.

    1. <div ng-app="myTestApp" ng-controller="testCtrl">
    2.   <p>The name is {{ firstName | uppercase }}</p>
    3. </div>

    If you enter the firstName as rahul it will return an output as RAHUL.

    Lowercase:

    This filter converts a set of string to lowercase.

    1. <div ng-app="myTestApp" ng-controller="testCtrl">
    2.  
    3.    <p>The name is {{ firstName | lowercase }}</p>
    4.  
    5. </div>

    If you enter the firstName as RAHUL it will return an output as rahul.

    orderBy:

    This filter is used for sorting an array.

    1. <div ng-app="myTestApp" ng-controller="namesCtrl">
    2.  
    3.   <ul>
    4.     <li ng-repeat="x in names | orderBy:'lastName'">
    5.       {{ x.lastName + ', ' + x.country }}
    6.     </li>
    7.   </ul>
    8.  
    9. </div>

    It will rearrange your array according to the lastName.

    Currency:

    This filter helps us to format a number to a currency format.

    1. <div ng-app="myTestApp" ng-controller="rateCtrl">
    2.  
    3.   <h1>Price: {{ price | currency }}</h1>
    4.  
    5. </div>

     

    Filter:

    This filter is used to select a subset of an array.It can only be used on arrays and it returns an array containing only the matching items.

    1. <div ng-app="myTestApp" ng-controller="namesCtrl">
    2.  
    3.   <ul>
    4.     <li ng-repeat="x in names | filter : 'i'">
    5.       {{ x }}
    6.     </li>
    7.   </ul>
    8.  
    9. </div>

    This will display only those names that contain the letter 'i' in it.

    filter AngularJS filters in angularJS
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: