Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Understanding Filters in AngularJS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 681
    Comment on it

    Filters are used to do some changes in the data. It can be used by adding pipe character.

    These are the types of filters in angular:

    • uppercase: It converts any text to upper case.
    • lowercase: It converts any text to lower case.
    • currency: It converts into currency format.
    • filter: It can filter array based on any given criteria.
    • orderby: It can order array based on any given criteria.

    uppercase filter:
    You can use uppercase filter by adding it to an expression using pipe(|) character. Below is the code that shows employee full name in uppercase.

    Enter first name:<input type = "text" ng-model = employee.firstName">
    Enter last name: <input type = "text" ng-model = employee.lastName">
    Name in Upper Case: {{employee.fullName() | uppercase}}

    lowercase filter:
    You can use lowercase filter by adding it to an expression using pipe(|) character. Below is the code that shows employee full name in lowercase.

    Enter first name:<input type = "text" ng-model = employee.firstName">
    Enter last name: <input type = "text" ng-model = employee.lastName">
    Name in Upper Case: {{employee.fullName() | lowercase}}

    currency filter:
    currency filter can be used by adding it to an expression using pipe character. It will return a number.

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

    filter filter:
    It is used to filter by a particular name. In the below code subject name is used as filter to display only required subjects.
     

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

    orderby filter:
    It is used to arrange data in some order. Below is the code that arrange subjects by order of marks.
     

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

    You can check the demo here.

     

 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: