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

How to use ng-href directive in AngularJS

ng-Href Directive                  ng-Href directive is hyper link markup to a text in angularJs. This hyperlink will change able to implement dynamic url {{hash}} value. Hash value to assign in a controller to happened user click event fire to assign dynamic url. This Value is undefined means it will return to 404 page. ng-Href directive Example  HTML:      <div ng-app="anchor">     <div ng-controller="anchorController">         <a ng-href="http://www.google.com" ng-click="show($event)">Anchor Tag</a>     </div>   </div> Javascript :  var anch = angular.module('anchor', []); anch.controller('anchorController',['$scope', '$window', function($scope, $window){     $scope.show = function(obj) {       $window.open(obj.target.href);     } }]); Result :  Dem...
4 comments
Read more

Google's Neverending Big Adventure

Google's Neverending Big Adventure   Why would Google want to send its Street View cameras into a vast crack in the Earth where there's nary a street to be found? It can't be as simple as "because it can." There must be some financial motive. Perhaps -- but monetization "is not how Google typically thinks about it," said tech analyst Greg Sterling. "This is part of the logic of Google's mission to map the real world in a complete way." In its ongoing effort to create the perfect map of the world at ground level, Google took a trek into the Grand Canyon this week. Although this is part of its Google Maps Street View project, there are of course no streets in the national park. Google Street View Product Manager Ryan Falor Google Street View Product Manager Ryan Falor controls the Trekker with his Android device. Earlier this month, Google announced that it had doubled the number of special collections in its Street View catalo...
1 comment
Read more