変換 - インラインng-repeatフィルタからカスタムフィルタ - angularjs

Question

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="myApp" ng-controller="myCtrl as vm"> 
    <form class="col2"> 
    <label for="filter-online"> 
    Filter by Online 
    </label> 
    <div class="select"> 
     <select id="filter-online" ng-model="vm.online" class="form-control" ng-options="online for online in vm.onlines"> 
     <option value="">All</option> 
     </select> 
    </div> 
    </form> 

    <form class="col2"> 
    <label for="filter-productType"> 
    Filter by Product Type 
    </label> 
    <div class="select"> 
     <select id="filter-productType" ng-model="vm.productType" class="form-control" ng-options="productType for productType in vm.productTypes"> 
     <option value="">All</option> 
    </select> 
    </div> 
    </form> 

    <table style="margin-top: 30px"> 
    <tr ng-repeat="lim in vm.stockLimits | filter:{online:vm.online || undefined, productType: vm.productType || undefined}"> 
     <td>{{lim.online}}</td> 
     <td>{{lim.productType}}</td> 
    </tr> 
    </table> 
</div> 

angular.module("myApp", []) 
    .controller("myCtrl", function($scope) { 
    var vm = this; 
    vm.onlines = ["Men", "Kids", "Ladies"]; 
    vm.productTypes = ["Shirt", "Shoe", "Belt", "Top"]; 
    vm.stockLimits = [{ 
     id: 1, 
     online: "Men", 
     productType: "Shirt" 
    }, { 
     id: 2, 
     online: "Men", 
     productType: "Shoe" 
    }, { 
     id: 3, 
     online: "Kids", 
     productType: "Belt" 
    }, { 
     id: 4, 
     online: "Ladies", 
     productType: "Top" 
    }, 
    { 
     id: 5, 
     online: "Kids", 
     productType: null 
    }] 
    }) 

onlineとproductTypeをフィルタリングするカスタムフィルタを宣言し、角htmlテンプレートからカスタムフィルタを呼び出したいとします。上のインラインフィルタは正常に機能しますが、私はインラインフィルタをカスタムフィルタに変換することを楽しみにしています。実際にはhtmlページからフィルタ関数を移動したい。 注：productTypeはnullでもかまいません。

Answer 1

あなたが道

angular.module("myApp").filter('productFilter', function() { 
    return function(items, filterOptions) { 
     if (!items) { 
      return [] 
     } 

     return items.filter(function(item) { 
      var isOnlinePassed = filterOptions.online ? (item.online === filterOptions.online) : true, 
       isProductTypePassed = filterOptions.productType ? (item.productType === filterOptions.productType) : true; 
      return isOnlinePassed && isProductTypePassed; 

     }) 
    } 
}) 

次カスタムフィルタを定義し、同様にあなたのテンプレートでフィルタを使用することができます。

<table style="margin-top: 30px"> 
    <tr ng-repeat="lim in vm.stockLimits | productFilter:{online:vm.online , productType: vm.productType}"> 
     <td>{{lim.online}}</td> 
     <td>{{lim.productType}}</td> 
    </tr> 
    </table>