How to Easily Create a Custom Filter in AngularJs

O.Nasri

4.44/5 (7 votes)

Nov 6, 2016

CPOL

1 min read

10372

A good example of how you can create a Custom Filter in AngularJs

Introduction

This article will give you a good example of how you can easily build a custom filter in AngularJs.

At the end of this article, you will have an example that shows you: how you can filter a content of a picklist depending on the choice made on another picklist.

Background

This article may be useful for intermediate developers who have some basics in programming with AngularJs.

Using the Code

1) Prerequisite

include AngularJs library by writing in the HTML Head tag, the following line:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

2) Source Code Details

a) JavaScript Code

In the JavaScript code, it will contain three parts:

Declaration of angular module named 'myApp'
Declaration of filter named 'myFilter': is a filter function that return a new list of Product filtered by the choice made from a ^picklist named 'categoryList'. The filter process is a comparison of the chosen category item with each element of the Product List.
Declaration of controller named 'myCtrl': it contains the initialization of four variables:
- selectedCategory: contains the selected element of 'categoryList'
- selectedProduct: contains the selected element of 'productList'
- CategoryList: its a JSON table that contains a list of Category object
- ProductList: its a JSON table that contains a list of Product object.

var app = angular.module('myApp', []);
angular.module('myApp').filter('myFilter', function() {
  return function(input, selectedCategory) {
   
    input = input || '';
     if(selectedCategory == null){
        return input;
    }else{
        var out = new Array();  
        selectedCategory = JSON.parse(selectedCategory);
        for (var i = 0; i < input.length; i++) {
            var item = input[i];
            if(item.categoryId == selectedCategory.id){
                out.push(item);
            }
        }
        return out;
    }
  };
});

app.controller('myCtrl', ['$scope', function($scope) {
    $scope.selectedCategory = null;
    $scope.selectedProduct = null;
    
    $scope.CategoryList = [
        {id:0, value:'PC'},{id:1, value:'printer'},{id:2, value:'TV'}
    ];
    $scope.ProductList = [
        {categoryId:0, id:1, value:'PC 1'},{categoryId:0, id:2, 
        value:'PC2'},{categoryId:0, id:3, value:'PC3'},
        {categoryId:1, id:4, value:'printer 1'},{categoryId:1, 
        id:5, value:'printer 2'},{categoryId:1, id:6, value:'printer 3'},
        {categoryId:2, id:7, value:'TV 1'},{categoryId:2, id:8, 
        value:'TV 2'},{categoryId:2, id:9, value:'TV 3'}
    ];    
}]);

b) HTML Code

<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<h1>Good Example in how you can create a Custom Filter in AngularJs</h1>
<div class="row">
<div class="col col-lg-4">
<form class="form">
    <div class="form-group">
    <label> Categories :</label>
    <select name="categoriesList" 
    ng-model="selectedCategory" class="form-control" >
        <option ng-repeat="item in CategoryList"   
        value='{{item}}'>{{item.value}}</option>
    </select>
    </div>
    <div class="form-group">
    <label> Products :</label>
    <select ng-disabled="selectedCategory == null" 
    name="productList" ng-model="selectedProduct" 
    class="form-control" >
    <option ng-repeat="item in ProductList | myFilter : 
    selectedCategory" value='{{item}}'>{{item.value}}</option>
    </select>
    </div>
</form>
</div>
</div>
</body>
</html>

c) Result

After you run this example, you will get:

To see how filter works, you should first select an item from the first picklist named 'categoriesList'.

For example, if you select the 'PC' category, you will get only products in the same category.

Points of Interest

I hope that you appreciated this post. Try to download the source code. I'm waiting for your questions and feedback.

History

v1 05/11/2016: Draft version