Góc JS ng: bộ lọc lặp lại dựa trên tùy chọn chọn

Question

Tôi mới sử dụng Góc. Tôi đang cố lọc bộ dữ liệu được hiển thị dựa trên tùy chọn được chọn với một hộp chọn.

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

Tôi đã sử dụng ví dụ được đưa ra trong http://docs.angularjs.org/api/ng.filter:filter, sử dụng hộp nhập để lọc. Khi chọn một thẻ đã cho, nó có vẻ lọc tốt. Tuy nhiên khi tôi chọn "Tất cả" có giá trị được đặt thành "", nó không hiển thị tất cả các mục nhập (xóa bộ lọc). Tuy nhiên trong ví dụ được hiển thị, khi hộp văn bản bị xóa, tất cả các mục được hiển thị.

Tôi đang làm gì sai?

Answer 1

Bạn sẽ cần phải thay đổi bạn chọn để:

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

thay vì

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

Giải thích: Từ những gì tôi đã nhìn thấy, nó không phổ biến để sử dụng một mã hóa cứng tùy chọn cùng với ng-tùy chọn và điều này đang góp phần vào vấn đề. Bộ lọc sử dụng mô hình của lựa chọn, hiện là một đối tượng thay vì một chuỗi như trong ví dụ Góc. Object patterns are okay nhưng trong trường hợp này, các thuộc tính của đối tượng trở thành null khi Tất cả được chọn vì nó không được nối vào lựa chọn giống như cách còn lại của các tùy chọn.

Đây là nguyên nhân khiến bộ lọc searchText thất bại vì nó mong đợi các chuỗi hợp lệ (ngay cả khi sử dụng đối tượng cho mẫu phù hợp).

Bằng cách sử dụng chuỗi nguyên thủy cho mô hình của lựa chọn, Tất cả 'hack' được giữ nguyên vì nó làm cho mô hình của chọn trở thành ('') thay vì null, sẽ khớp với mọi thứ và tất cả kết quả được hiển thị.

Answer 2

Tôi đã gặp phải sự cố tương tự. Cách mà tôi đã sửa nó đang sử dụng .toString() trong bộ lọc.