2014-06-16 5 views
4

'고급 검색'기능을 추가 할 사용자 데이터 목록이 있습니다. 고급 검색은 특정 부서에서 사용자에게 결과를 제한, 사용자가 예를 들어, 자신의 결과를 필터링 할 수 있도록 드롭 다운의 숫자로 구성AngularJS 필터에서 빈 드롭 다운 값을 무시합니다.

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

하지만,하지만, 디버깅은 커스텀 비교기가 사용되는 것을 볼 수 있었지만 결과에 아무런 영향을주지 않았습니다.

빈 옵션을 선택하면 필터가 드롭 다운을 무시하도록하려면 어떻게해야합니까?

답변

4
당신의 비교기에서 매개 변수의 순서가 잘못

, 비교기는 function(actual, expected)로 정의되어야한다 : 나는 문자열과 번호 검색 필드와 함께 작동하도록 기능을 업데이트

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

감사합니다. 나는 그것이 단순 할 것이라고 느끼고 있었다! –

0

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

관련 문제