基于下拉过滤表列角度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 select & filter_productType select），需要过滤表中的数据。 是否可以在 Angular 脚本文件中编写一个自定义过滤器 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 : ''
          }"

在下面找到工作代码 sn-p！

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。请注意，您必须添加两个自定义过滤器（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/

Answer 4

最好使用npm包的过滤器；

安装它：- npm i ng2-search-filter

将此导入module.ts

从 'ng2-search-filter' 导入 { Ng2SearchPipeModule }；

在 html 中：*ngFor="let Dealerdata of Dealer_data|filter:Status|filter:Range"