表空列过滤器角Js(Table Null Column Filter Angular Js)

表空列过滤器角Js(Table Null Column Filter Angular Js) <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 。

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

I want to filter the data based on filter-online & filter-productType drop down. Online always has some data but productType can be null value. When i filter by kids, productType which has null values are not filtering properly. I need result like below if i filter by 'Kids'.

Kids Belt Kids

But, i'm getting only one row Kids Belt.

最满意答案

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

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

您可能还希望严格选项为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> 
  
 
You're running into an issue because your filter is searching for items that contain an empty string. All items but null contain an empty string. Disable the filter by setting the property to undefined.
 
<tr ng-repeat="lim in vm.stockLimits | filter:{online:vm.online || undefined, productType: vm.productType || undefined}">
 
You may also want the strict option to true. This would be like so:
 
<tr ng-repeat="lim in vm.stockLimits | filter:{online:vm.online || undefined, productType: vm.productType || undefined} : true">
 
This will only include exact matches rather than just strings that contain the provided filter (e.g. Top as a filter will only match Top and not Topsuit, and '' only matches another empty string and not any string).
 
 
 
  
  
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(Table Null Column Filter Angular Js)

                <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 。 
<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
    }]
  })
 
I want to filter the data based on filter-online & filter-productType drop down. Online always has some data but productType can be null value. When i filter by kids, productType which has null values are not filtering properly. I need result like below if i filter by 'Kids'. 
 
Kids    Belt
Kids
 
But, i'm getting only one row Kids Belt.
                
最满意答案
                
                    
                        
 您遇到问题是因为您的过滤器正在搜索包含空字符串的项目。 除null所有项目都包含一个空字符串。 通过将属性设置为undefined来禁用过滤器。 
 
<tr ng-repeat="lim in vm.stockLimits | filter:{online:vm.online || undefined, productType: vm.productType || undefined}">
 
 您可能还希望严格选项为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> 
  
 
You're running into an issue because your filter is searching for items that contain an empty string. All items but null contain an empty string. Disable the filter by setting the property to undefined.
 
<tr ng-repeat="lim in vm.stockLimits | filter:{online:vm.online || undefined, productType: vm.productType || undefined}">
 
You may also want the strict option to true. This would be like so:
 
<tr ng-repeat="lim in vm.stockLimits | filter:{online:vm.online || undefined, productType: vm.productType || undefined} : true">
 
This will only include exact matches rather than just strings that contain the provided filter (e.g. Top as a filter will only match Top and not Topsuit, and '' only matches another empty string and not any string).
 
 
 
  
  
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>