Skip to main content

Custom Filter for AngularJS

              Angular directive implements to custom filter concept is apply to filter large data array object will filter specific terms and condition write to yours. Angularjs have some basic filters directive is there. Some more filter need your project means, will try own filter concept is available from angularjs. 

          Custom filter is more reuse more project from this custom logic. This filter like a library, this write same file or external also.

I have sample array Object: 

 $scope.supplierList =  [
        {
            "productname": "heliumcylinder",
            "catagoriesName": "cylinder"
        },
        {
            "productname": "boost",
            "catagoriesName": "cylinder"
        },
        {
            "productname": "test 3",
            "catagoriesName": "cylinder"
        },
        {
            "productname": "test1",
            "catagoriesName": "cylinder"
        },
        {
            "productname": "test5",
            "catagoriesName": "cylinder"
        },
        {
            "productname": "test6",
            "catagoriesName": "gas"
        },
        {
            "productname": "test6",
            "catagoriesName": "test4"
        },
        {
            "productname": "test16",
            "catagoriesName": "test5"
        },
        {
            "productname": "test10",
            "catagoriesName": "test5"
        },
        {
            "productname": "product1",
            "catagoriesName": "test5"
        }
    ];
    
HTML :

<div ng-app="repeatModule">
    <div ng-controller="repeatController">
     Supplier List {{supplierList}}
        <hr/><br/>
     First Filter {{catFilter}}
        <hr/><br/>
        Second Filter {{cat1Filter}}
    </div>
</div>

Angular
app = angular.module("repeatModule", []);

app.controller("repeatController", function ($scope,  $filter) {
    
    $scope.supplierList =  [
        {
            "productname": "heliumcylinder",
            "catagoriesName": "cylinder"
        },
        {
            "productname": "boost",
            "catagoriesName": "cylinder"
        },
        {
            "productname": "test 3",
            "catagoriesName": "cylinder"
        },
        {
            "productname": "test1",
            "catagoriesName": "cylinder"
        },
        {
            "productname": "test5",
            "catagoriesName": "cylinder"
        },
        {
            "productname": "test6",
            "catagoriesName": "gas"
        },
        {
            "productname": "test6",
            "catagoriesName": "test4"
        },
        {
            "productname": "test16",
            "catagoriesName": "test5"
        },
        {
            "productname": "test10",
            "catagoriesName": "test5"
        },
        {
            "productname": "product1",
            "catagoriesName": "test5"
        }
    ];
    
    angular.forEach($scope.supplierList, function(val, key){if(val.catagoriesName=="cylinder"){} });
    
$scope.catFilter  = $filter('unique')($scope.supplierList,'catagoriesName');
    
    $scope.cat1Filter =  $filter('filter')($scope.supplierList,                                 function(val, key){if(val.catagoriesName=="cylinder"){
        console.log(val.productname);
        return val;
    }
                                                                                                             },true)
    console.log($scope.cat1);
});

app.filter('unique', function() {
   return function(collection, keyname) {
      var output = [], 
          keys = [];

      angular.forEach(collection, function(item) {
          var key = item[keyname];
          if(keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(item);
          }
      });
      return output;
   };
});

Result:

Comments

Post a Comment

Popular posts from this blog

How has lockdown impacted Indian farmers?

How has lockdown impacted Indian farmers?             Generally compare to other sectors it's not major impacted by our Indian farmers but we acceptable minor impacts. Here we separate major two farming cultures one is mono farming culture another one poly farming culture. Mono farming :             The major impacts from our Indian farmer for monoculture. Here I have briefly explained what are the things we had faced our local farmers. Here I explain two different crops type: Daily crops : * We harvest more than 100-kilo grams daily crops like brinjal but we unable to sell those in local markets. * We are unable to reach urban markets. * We don't have enough transport facilities. * We unable buy require fertilizer and other complements * In the early stage we are facing manpower shortage but later it's not an issue. * We unable to do value-added products. * Waste is very high for somedays Se...
Post a Comment
Read more

Timer Display using AngularJS

Timer Display To display timer in a page means, we need to aware of angular directive as following $interval and $filter . Current time get from new Date() object from native java script.   $interval Directive:  A interval is wait into a millisecond or trigger to a function, This function many many time to repeatedly calling process is control to us.   Syntax:  $interval(fn, delay, [count], [invokeApply]); fn - a function to call repeatedly. Delay – number of millisecond to call a function. Count – Number of time to repeat.(0 value means no-repeat) invoteApply – set to false means it will skip. Example:  HTML: <div ng-app="timerApp">     <div ng-controller="timerController">         {{time}}     </div> </div> JAVAScript: var app = angular.module("timerApp", []); app.controller("timerController",['$scope','$interval...
Post a Comment
Read more

ng-Class using angularjs Example

ng-Class in angularJS         ng-Class directive to manage a css properties from the DOM Objects. This directive very support to user presentation css apply dynamically and more response, angularjs used for bootstrap css only. Write different properties from the css file and enable from the controller scope object values. HTML:    <div ng-app="classApp">     <div ng-controller="ClassCtrl">        <span ng-if="showValue">         <p ng-class ="{'red': show, 'green': show1}">{{name}}         </p>         </span>          <span ng-if="!showValue">         <p ng-class ="{'red': show, 'green': show1}">{{name}}         </p>         </span>     </div> </div> Angular Script: ...
Post a Comment
Read more