過濾器表列角度js基於下拉

Question

<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> 

<tr ng-repeat="lim in vm.stockLimits track by lim.id"> 
     <td>{{lim.online}}</td> 
     <td>{{lim.producttype}}</td> 
</tr> 

vm.stockLimits values below: 
ONLINE PRODUCT TYPE 
Men Shirt 
Men Shoe 
Ladies Top 
Kids belt 
Kids 
.......... 
.......... 

基於下拉（filter_online選擇& filter_productType選擇），需要過濾表中的數據。 是否可以在角度腳本文件中編寫一個自定義過濾器javascript函數，該文件可用於基於下拉選擇過濾在線&產品類型？如果你向我展示這樣做的想法，那將是非常棒的。

Answer 1

我在您的ng-repeat上添加了一個自定義過濾器，以便可以從下拉選擇中動態過濾出所選值。

這裏的ng-repeat：

ng-repeat="lim in vm.stockLimits | filter:{ 
      online:vm.online && vm.online !== '' ? vm.online : '', 
      productType: vm.productType && vm.productType !== '' ? vm.productType : '' 
      }" 

下面找到工作的代碼片段！

angular.module("myApp", []) 
 
    .controller("myCtrl", function($scope) { 
 
    var vm = this; 
 
    vm.onlines = ["Men", "Kids", "Ladies"]; 
 
    vm.productTypes = ["Shirt", "Shoe", "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" 
 
    }] 
 
    })

<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 && vm.online !== '' ? vm.online : '', productType: vm.productType && vm.productType !== '' ? vm.productType : ''}"> 
 
     <td>{{lim.online}}</td> 
 
     <td>{{lim.productType}}</td> 
 
    </tr> 
 
    </table> 
 
</div>

Answer 2

在AngularJS中，您可以在數組上堆疊任意數量的過濾器。

試着做這樣的事情：

HTML：

<select ng-model="vm.online" ng-options="online for online in vm.onlines" ng-change="vm.filterChanged()"> 
    <option value="">All</option> 
</select> 

<select ng-model="vm.productType" ng-options="productType for productType in vm.productTypes" ng-change="vm.filterChanged()"> 
    <option value="">All</option> 
</select> 

<tr ng-repeat="lim in vm.filteredStockLimits = vm.stockLimits | filterByOnline:vm.online 
     | filterByProductType:vm.productType track by lim.id"> 

JS（控制器）：

var filterChanged = function() { 
     var filtered = $filter('filterByOnline')(vm.stockLimits, vm.online); 
     vm.filteredStockLimits = $filter('filterByProductType')(filtered, vm.productType); 
} 

在你的控制器，你將數據讀入你最初vm.stockLimits數組被過濾成vm.filteredStockLimits wh任一選擇框都被更改。請注意，您將不得不添加兩個自定義過濾器（filterByOnline和filterByProductType）以通過聯機和產品類型過濾數組。爲此，您可以參考AngularJS文檔：AngularJS Custom Filters

Answer 3

您可以使用ng-show或ng-if過濾數據。

無需創建自定義過濾器。

這樣的事情。

<tr ng-repeat="lim in vm.stockLimits" ng-show="lim.productType==vm.productType && lim.online==vm.online"> 
 
    <td>{{lim.online}}</td> 
 
    <td>{{lim.productType}}</td> 
 
    </tr>

看到這裏 http://jsfiddle.net/SNF9x/315/