Tabelle Null Spaltenfilter Winkel 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 
    }] 
    }) 

Ich möchte die Daten basierend auf filter-online & filter-productType Dropdown filtern. Online hat immer einige Daten, aber ProductType kann Nullwert sein. Wenn ich nach Kindern filtere, filtert productType mit Nullwerten nicht richtig. Ich brauche das Ergebnis wie unten, wenn ich nach 'Kids' filtere.

Kids Belt 
Kids 

Aber, ich bin nur eine Zeile Kids Belt bekommen.

Answer 1

Sie stoßen auf ein Problem, weil Ihr Filter nach Elementen sucht, die eine leere Zeichenfolge enthalten. Alle Elemente außer null enthalten eine leere Zeichenfolge. Deaktivieren Sie den Filter, indem Sie die Eigenschaft auf undefined festlegen.

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

Sie können auch die strikte Option zu wahren. Das ist wie so wäre:

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

Dieses nur genaue Matches enthalten wird und nicht nur Zeichenfolgen, die den mitgelieferten Filter enthalten (zB Top als Filter nur Top und nicht Topsuit entsprechen, und '' passt nur eine weitere leere Zeichenfolge und keine Zeichenfolge).

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>