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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 293
    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.

    <div ng-app="myTestApp" ng-controller="testCtrl">
      <p>The name is {{ firstName | uppercase }}</p>
    </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.

    <div ng-app="myTestApp" ng-controller="testCtrl">
    
       <p>The name is {{ firstName | lowercase }}</p>
    
    </div>

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

    orderBy:

    This filter is used for sorting an array.

    <div ng-app="myTestApp" ng-controller="namesCtrl">
    
      <ul>
        <li ng-repeat="x in names | orderBy:'lastName'">
          {{ x.lastName + ', ' + x.country }}
        </li>
      </ul>
    
    </div>

    It will rearrange your array according to the lastName.

    Currency:

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

    <div ng-app="myTestApp" ng-controller="rateCtrl">
    
      <h1>Price: {{ price | currency }}</h1>
    
    </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.

    <div ng-app="myTestApp" ng-controller="namesCtrl">
    
      <ul>
        <li ng-repeat="x in names | filter : 'i'">
          {{ x }}
        </li>
      </ul>
    
    </div>

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

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: