Question

我有一个可以通过多列过滤的表。过滤器很严格。启动数据时，它会显示所有值。但是，在按某些列过滤并返回空选项以显示所有值后，它会显示一个空表。如何仅对非空值应用严格过滤器？

<select
    ng-model="search.column1">
    <option value=''></option>
    <option ng-repeat="e in vm.getExample value="{{e.column1}}">{{e.column1}}</option>
</select> 

<select
    ng-model="search.column2">
    <option value=''></option>
    <option ng-repeat="e in vm.getExample value="{{e.column2}}">{{e.column2}}</option>
</select> 

<table>
    <tr>
        <th>Column1</th>
        <th>Column2</th>
    </tr>

    <tr ng-repeat="e in vm.getExample | filter:search:true">
        <td>{{ e.column1 }}</td>
        <td>{{ e.column2 }}</td>
    <tr>
</table>

Answer 1

您的问题在于使用filter：

您应该将filter:search:true更改为filter:search。

第三个参数filter是比较器。在这种情况下，您不需要它：

比较器，用于确定是否使用检索的值表达式（当它不是函数时）应被视为匹配基于期望值（来自过滤器表达式）和实际值 value（来自数组中的对象）。

如果您想了解更多关于比较器的信息，我建议您阅读this excellent answer（SO）。

代码的工作片段：

var app = angular.module('testApp', []);
app.controller('testController', ['$scope', function($scope) {
  this.getExample = [{
    'column1': 1,
    'column2': 2
  }, {
    'column1': 3,
    'column2': 4
  }, {
    'column1': 5,
    'column2': 6
  }];
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testController as vm">
  <select ng-model="search.column1">
    <option value=''></option>
    <option ng-repeat="e in vm.getExample" value="{{e.column1}}">{{e.column1}}</option>
  </select>

  <select ng-model="search.column2">
    <option value=''></option>
    <option ng-repeat="e in vm.getExample" value="{{e.column2}}">{{e.column2}}</option>
  </select>

  <table>
    <tr>
      <th>Column1</th>
      <th>Column2</th>
    </tr>

    <tr ng-repeat="e in vm.getExample | filter:search">
      <td>{{ e.column1 }}</td>
      <td>{{ e.column2 }}</td>
      <tr>
  </table>
</div>

Answer 2

在控制器中创建自定义过滤器：

$scope.filterMyData = function (input, searchParam) {

     if (searchParam == '')
          return true;

     return angular.equals(input, searchParam);
}

改为：

<tr ng-repeat="e in vm.getExample | filter:search:filterMyData">

当AngularJS严格过滤字段为空时如何显示所有值？

2 个答案: