テーブルNullカラムフィルタ角度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はNULL値にすることができます。子供でフィルタリングすると、null値を持つ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にすることもできます。これは、そうのようになる：フィルタのみTopないTopsuitにマッチします、と''だけ別の空に一致するよう

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

これはのみ正確な一致ではなく、設けられたフィルタ（例えばTopが含まれている文字列だけが含まれます文字列ではありません）。

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>