AngularJS #10 - Filters

✔ AngularJS Filters

 > AngularJS provides filters to transform data:

  - 'currency' Format a number to a currency format

  - 'date' Format a date to a specified format

  - 'filter' Select a subset of items from an array

  - 'json' Format an object to a JSON string

  - 'limitTo' Limits an array/string, into a specified number of elements/characters

  - 'lowercase' Format a string to lower case

  - 'number' Format a number to a string

  - 'orderBy' Orders an array by and expression

  - 'uppercase' Format a string to upper case

 

1. Adding Filters to Expressions

 > Filters can be added to expressions by using the pipe character | , followed by a filter

<div ng-app="myApp" ng-controller="personCtrl">
 <p>The name is {{ lastName | uppercase }}</p>
</div>

<div ng-app="myApp" ng-controller="personCtrl">
 <p>The name is {{ lastName | lowercase }}</p>
</div>

 

2. Adding Filters to Directives

 > Filters are added to directives, like 'ng-repeat', by using the pipe character | , followed by a filter

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

<script>
angular.module('myApp', []).controller('namesCtrl, function($scope) {
 $scope.names = [
  {name:'Kim', country:'Korea'},
  {name:'Jokbari', country:'japan'},
  {name:'JangKai', country:'china'}
 ];
});
</script>

 

 

3. The filter Filter

 > The filter Filter can only be used on arrays, and it returns an array containing only the matching items

<div ng-app="myApp" ng-controller="namesCtrl">
 <ul>
  <li ng-repeat="x in names | filter : 'i'">
   {{ x }}
  </li>
 </ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        'Jani',
        'Carl',
        'Margareth',
        'Hege',
        'Joe',
        'Gustav',
        'Birgit',
        'Mary',
        'Kai'
    ];
});
</script>

 

 

4. Filter an Array Based on User Input

 > By setting the 'ng-model' directive on an input field, we can use the value of the input filed as an expression in a filter

<div ng-app="myApp" ng-controller="namesCtrl">
 <p><input type="text" ng-model="test"></p>
 <ul>
  <li ng-repeat="x in names | filter : "text">
   {{ x }}
  </li>
 </ul>
</div>

 

5. Sort an Array Based on User Input

 > by adding the 'ng-click' directive on the table headers, we can run a function that changes the sorting order of the array

<div ng-app="myApp" ng-controller="namesCtrl">
 <table border="1" width="100%">
  <tr>
   <th ng-click="orderByMe('name')">Name</th>
   <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
   <td>{{x.name}}</td>
   <td>{{x.country}}</td>
  </tr>
 </table>
</div>

<script>
 angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
   {name:'Kim', country:'Korea'},
   {nmae:'Lee', country:'Taiwan'},
   {name:'Park', country:'Italy'}
  ];
  $scope.orderByMe = function(x) {
   $scope.myOrderBy = x;
  }
 });
</script>

 

6. Cutsom Filters

 > can make your own filters by registering a new filter factory function with module

<ul ng-app="myApp" ng-controller="namesCtrl">
 <li ng-repeat="x in names">
  {{x | myFormat}}
 </li>
</ul>

<script>
 var app = angular.module('myApp', []);
 app.filter('myFormat', function() {
  return function(x) {
   var i, c, txt = "";
   for(i=0; i < x.length; i++){
    c = x[i];
    if(i%2 == 0){
     c = c.toUpperCase();
    }
    txt += c;
   }
   return txt;
  };
 });
 app.controller('namesCtrl', function($scope){
  $scope.names = ['Kim', 'Lee', 'Park'];
 });
</script>