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

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的第三个参数是比较器。在这种情况下，您不需要它：

比较器，用于确定是否使用 表达式(当它不是函数时(应被视为匹配项 基于预期值(来自筛选器表达式(和实际值 值(来自数组中的对象(。

如果您想了解有关比较器的更多信息，我建议您阅读此出色的答案(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">