AngularJS strict filter字段为空时，如何显示所有值？

Question

我有一个表，它可以被几个列过滤。过滤器很严格。启动数据时，它会显示所有值。然而，在按某列过滤并返回到empty选项以显示所有值之后，它将显示一个空表。如何仅对非空值应用严格筛选器？

<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

已在控制器中创建自定义筛选器：

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

     if (searchParam == '')
          return true;

     return angular.equals(input, searchParam);
}

并改为：

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

Answer 2

您的问题在于过滤器的使用：

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

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

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

如果你想了解更多关于比较器的信息，我建议你阅读这个优秀的答案（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>