Creating Custom Angular js Filters

What Will I Learn?

Angular filters is one of the trickiest concepts to work with and could be a bit difficult to learn but its is a great for transforming data to reusable and scalable little part.
In this tutorial you will learn how to

create custom filters
use custom filters

Requirements

You will need the following for this tutorial

Any code editor
Install Angular
Basic knowledge of angular

Difficulty

Intermediate

Tutorial Contents

For the sake of this tutorial, we will filter a list and return items that match our criteria.

criteria : filter primary colours from other colours

Step 1 : Creating the module

var app = angular.module('filters', []);

Step 2 : Creating the controller

app.controller('colourCtrl', function($scope){
      $scope.example = [
            {name: 'red' , type : 'primary' } ,
            {name: 'green' , type : 'secondary' } ,
            {name: 'purple' , type : 'secondary' } ,
            {name: 'yellow' , type : 'primary' } ,
            {name: 'orange' , type : 'secondary' } ,
            {name: 'blue' , type : 'primary' }  
       ]
})

Step 3 : Creating the filter

app.filter('primaryColour', function(){
      return function ( input ){
          var out = [];
           angular.forEach(input, function(colour){
               if(colour.type === 'primary'){
                 out.push(colour)
                   }
                 })
                return out;
             }
      })

Step 3 : Html code

 <div class="container">
            <div class="row">
                <div class="col-lg-6 col-lg-offset-3">
                    <div ng-app="filters">
                        <div ng-controller="colourCtrl">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <h4 class="text-center">AngularJS Filter - Primary Colour</h4>
                                    <p><strong>Original :</strong></p>
                                    <ul class="list">
                                        <li ng-repeat="col in example">{{col.name}}</li>
                                    </ul>
                                    <p><strong>Primary Colour Filter:</strong></p>
                                    <ul class="list">
                                        <li ng-repeat="col in example | primaryColour">{{col.name}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>                
            </div>
        </div>