Step 6-AngularJS Filters

Definition – Filters are used to change the format of data.

Types of Filters –There are 9 filters in AngularJS.

  • currency
  • date
  • filter
  • json
  • limitTo
  • lowercase
  • number
  • orderBy
  • uppercase

Syntax-  data | filter

Example snippet- “abc |uppercase”

Now look on this code example- Which can be saved in html and open it on browser

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>AngularJS Filters Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.name = "John";
      $scope.amount = 1234.56;
      $scope.date = new Date();
      $scope.names = [
        {name:'John', country:'USA'},
        {name:'Mary', country:'Canada'},
        {name:'Lucy', country:'Australia'}
      ];
    });
  </script>
</head>
<body ng-controller="myCtrl">
  <h2>AngularJS Filters Example</h2>
  <p>Original name: {{name}}</p>
  <p>Uppercase name: {{name | uppercase}}</p>
  <p>Amount: {{amount | currency}}</p>
  <p>Date: {{date | date:'MM/dd/yyyy'}}</p>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="person in names | orderBy:'name'">
        <td>{{person.name | lowercase}}</td>
        <td>{{person.country | uppercase}}</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.