2013-05-30 2 views
6

Angular를 처음 사용합니다. 선택 상자로 선택한 옵션을 기반으로 표시된 데이터 세트를 필터링하려고합니다. Angular JS ng : 선택 옵션을 기준으로 반복 필터

<div ng-controller="CurrentTrandetailsController"> 
    <div> 
     <div class="pull-right">   
      <label for="show-filter" class="show-label">Show </label> 
      <select name="show-filter" ng-model="searchText.accruedcard" id="show-filter" ng-options="trandetail.accruedcard as trandetail.accruedcard for trandetail in currentTrandetails.trandetails "> 
       <option value="">All</option> 
      </select>      
     </div> 
     <h3>Current trandetails</h3> 
    </div> 
    <div> 
     <table class="table table-striped table-hover"> 
      <tbody> 
       <tr ng-repeat="trandetail in currentTrandetails.trandetails | filter:searchText"> 
        <td>{{trandetail.dateAccrued}}</td> 
        <td>{{trandetail.accruedcard}}</td> 
        <td>{{trandetail.placeAccrued}}</td> 
        <td>{{trandetail.discountcents}}</td> 
        <td>{{trandetail.shortExpiryDate}}</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 

는 I 필터링하는 입력 박스를 사용 http://docs.angularjs.org/api/ng.filter:filter에 제공된 예를 사용 하였다. 주어진 카드를 선택하면 잘 걸리는 것처럼 보입니다. 그러나 값을 ""로 설정 한 "모두"를 선택하면 모든 항목이 표시되지 않습니다 (필터 지우기). 그러나 표시된 예제에서 텍스트 상자가 지워지면 모든 항목이 표시됩니다.

내가 뭘 잘못하고 있니?

답변

4

당신은 당신의 선택을 변경해야합니다 :

<select name="show-filter" ng-model="searchText" ... 

대신

<select name="show-filter" ng-model="searchText.accruedcard" ... 

설명 : 내가 본 바로는, 그것을 사용하는 것이 일반적 아니에요 하드 코딩 옵션을 ng-options와 함께 사용하면이 문제에 기여하게됩니다. 필터는 선택 항목의 모델을 사용합니다.이 모델은 현재 각도 예제와 같이 문자열 대신 객체입니다. Object patterns are okay하지만이 경우 나머지가 옵션과 동일한 방법으로 선택되지 않기 때문에 모두가 선택되면 객체의 속성은 null이됩니다.

이것은 유효한 문자열을 기대하고 있기 때문에 (매칭 패턴 오브젝트를 사용하는 경우에도) 실패 할 searchText 필터를 발생하는 것이다.

선택 모델에 문자열 프리미티브를 사용하면 선택 모델을 null 대신 ('')이되어 모든 항목과 일치하며 모든 결과가 표시되므로 All 'hack'이 보존됩니다.

+0

환상적인 답변 ... 훌륭한 반응을 보내 주셔서 감사합니다. – user1159790

0

같은 문제가 발생했습니다. 내가 고쳤던 방식은 필터에 .toString()을 사용하고 있었다.