Блог

У меня есть табличный список пользовательских данных, к которому я добавляю функцию расширенного поиска. Расширенный поиск состоит из нескольких выпадающих списков, позволяющих пользователям фильтровать свои результаты, например, ограничивая результаты пользователями из определенного отдела:

 <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'
  

но хотя при некоторой отладке можно было видеть, что используется пользовательский компаратор, это не имело никакого значения для результатов.

Итак, как я могу заставить фильтр игнорировать выпадающие списки, если выбран пустой параметр?

Порядок параметров в вашем компараторе неверен, компаратор должен быть определен как function(actual, expected) :

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

я обновляю функцию для работы со строковыми и числовыми полями поиска

 $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;        
        };  

 <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>