表空列过滤器角度Js

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的数据& 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>