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 && vm.online !== '' ? vm.online : '', productType: vm.productType && vm.productType !== '' ? vm.productType : ''}">
      <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
    }]
  })

我想基于filter-online＆amp; amp;过滤数据。 filter-productType下拉列表。在线总是有一些数据，但productType可以是空值。当我按孩子过滤时，具有空值的productType未正确过滤。如果我按'孩子'过滤，我需要如下结果。

Kids    Belt
Kids

但是，我只得到一排 Kids Belt。

Answer 1

您遇到了问题，因为您的过滤器正在搜索包含空字符串的项目。除null之外的所有项目都包含空字符串。通过将属性设置为undefined来禁用过滤器。

<tr ng-repeat="lim in vm.stockLimits | filter:{online:vm.online || undefined, productType: vm.productType || undefined}">

您可能还希望将strict选项设置为true。这就是这样：

<tr ng-repeat="lim in vm.stockLimits | filter:{online:vm.online || undefined, productType: vm.productType || undefined} : true">

这只会包含完全匹配，而不仅仅是包含所提供过滤器的字符串（例如Top，因为过滤器只匹配Top而不是Topsuit ，''只匹配另一个空字符串而不是任何字符串。）

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
    }]
  })

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

表空列过滤器角度Js

1 个答案: