Monday 22 June 2015

Filtering

Filtering is a feature provided by Angular JS directives. I wish discuss about how filtering is implemented. Let's see how filters are implemented in ng-repeat directive.

<div ng-repeat="item in helloData.items | filter: testFilter"></div>
<!-- Script -->
<script>
  angular.module("helloapp", [])
    .controller("HelloController", function($scope) {
      $scope.helloData = {};
      $scope.helloData.items  = [ {text : "uno"}, {text : "dos"}, {text : "tres"}, {text : "cuatro"} ];

      $scope.testFilter = function(item) {
        if(item.text == "dos") return false;
          return true;
        }
      }
    });

</script>
<!-- end -->

The filter with piped symbol in the markup denotes a filter is applied (| filter:) to the array items. Here 'testFilter' is the custom filter, defined as function. If the testFilter returns true item is printed else it will be discarded.

Other than the custom filters, Angular JS provides formatting, array filters etc. Formatting filter can be named date, currency, number etc. Using array filters you could restrict the item count with limitTo filter, order records in asc/desc formats.

Please let us know your feedback. Happy to help. Thank you.

No comments:

Post a Comment