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＆amp; filter_productType select），需要过滤表中的数据。是否可以在角度脚本文件中编写一个自定义过滤器javascript函数，该函数可用于过滤在线和＆amp;产品类型基于下拉选择？如果你告诉我这样做的想法会很棒。

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。请注意，您必须添加两个自定义过滤器（filterByOnline和filterByProductType）才能按在线和产品类型过滤数组。为此，您可以参考AngularJS文档：AngularJS Custom Filters

Answer 3

您可以使用float:left或fieldset{ border: 1px solid rgb(255,232,57); width: 400px; margin: 0 auto; }过滤数据。

无需创建自定义过滤器。

像这样的东西。

＆＃13;

ng-show

＆＃13;

在这里看到完整的工作 http://jsfiddle.net/SNF9x/315/

Answer 4

最好使用过滤器的npm包；

安装：-npm i ng2-search-filter

将此导入到module.ts

从“ ng2-search-filter”导入{Ng2SearchPipeModule};

在html中：* ngFor =“让Dealer_data | filter：Status | filter：Range的Dealerdata”

根据下拉列表过滤表列角度js

4 个答案: