Question

我有一个用户数据的表格列表，我正在添加“高级搜索”功能。高级搜索包含许多下拉菜单，允许用户过滤其结果，例如，将结果限制为特定部门的用户：

<select ng-model="search.department_id" ng-options="department.id as department.name for department in departments">
    <option value="">(Select from list)</option>
</select>

然后使用以下方式显示结果：

<table>
    <tr ng-repeat="user in users | filter:search | orderBy:'name')">
        <td> [code to show user data here.] </td>
    </tr>
</table>

如果您从下拉列表中选择一个部门，则此操作正常。但是，如果您改变主意并再次选择默认的“（从列表中选择）”选项，则仅显示具有空白 department_id值的用户。我想要发生的是，如果没有选择任何部门，则忽略部门下拉列表。

经过一番搜索后，看起来我可以使用自定义比较器来解决这个问题，所以我写了这个：

$scope.ignoreNullComparator = function(expected, actual){
    if (expected === null) {
        return true;
    } else {
        return angular.equals(expected, actual);
    }
};

并将ng-repeat更改为：

ng-repeat="user in users | filter:search:ignoreNullComparator | orderBy:'name'

但是虽然有些调试可以看到使用自定义比较器，但它对结果没有任何影响。

那么，如果选择了空白选项，如何让过滤器忽略下拉列表？

Answer 1

比较器中参数的顺序错误，比较器应定义为function(actual, expected)：

$scope.ignoreNullComparator = function(actual, expected){
    if (expected === null) {
        return true;
    } else {
        return angular.equals(expected, actual);
    }
};

Answer 2

我更新该功能以使用字符串和数字搜索字段

＆＃13;

$scope.ignoreNullComparator = function(actual, expected){            
            if (expected === null || expected === '' || typeof expected === "undefined") {
                return true;
            } else   if(!isNaN(expected)) {
                expected2 = parseInt(expected);
                return angular.equals(expected2, actual);
            } else  if( actual.indexOf(expected) === -1 ){
                return false;
            }
            return true;        
        };

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

＆＃13;

忽略AngularJS过滤器中的空白下拉列表值

2 个答案: