过滤器表列角度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/