Lọc một Angular 1,2 ng-repeat với “track by” bởi thuộc tính boolean


80

Tôi đang cố gắng lọc một số mục danh sách dựa trên giá trị của thuộc tính boolean, nhưng bất kể tôi làm gì, toàn bộ danh sách luôn được hiển thị. Một vài trong số những thứ tôi đã thử đã bị hỏng đến mức không có gì hiển thị, nhưng điều đó không ở đây cũng như ở đó. Tôi không thể làm cho bộ lọc của mình hoạt động như mong muốn:

$scope.attendees = [
     {"firstname":"Steve",    "lastname":"Jobs",  "arrived":true,  "id":1}
    ,{"firstname":"Michelle", "lastname":"Jobs",  "arrived":false, "id":2}
    ,{"firstname":"Adam",     "lastname":"Smith", "arrived":true,  "id":3}
    ,{"firstname":"Megan",    "lastname":"Smith", "arrived":false, "id":4}
    ,{"firstname":"Dylan",    "lastname":"Smith", "arrived":false, "id":5}
    ,{"firstname":"Ethan",    "lastname":"Smith", "arrived":false, "id":6}
];

Sử dụng bộ lọc ng-lặp lại sau:

<ul>
    <li ng-repeat="person in attendees track by person.id | filter:arrived:'false'">
            {{person.lastname}}, {{person.firstname}}
    </li>
</ul>

Tôi cảm thấy như tôi đã thử mọi hoán vị mà tôi có thể tìm thấy được tham chiếu, hầu hết trong số đó đến từ các kết quả tìm kiếm StackOverflow khác nhau:

  • filter:'arrived'
  • filter:arrived
  • filter:'person.arrived'
  • filter:person.arrived
  • filter:{arrived:true}
  • filter:{arrived:'true'}
  • filter:{person.arrived:true}
  • filter:{person.arrived:'true'}

Tôi cũng đã thử tạo một chức năng lọc tùy chỉnh:

$scope.isArrived = function(item) {
    return item.arrived;
};

Và áp dụng nó như vậy:

  • filter:isArrived
  • filter:'isArrived'
  • filter:{isArrived(person)}
  • filter:isArrived(person)
  • filter:'isArrived(person)'

Không có cái nào trong số này có vẻ hiệu quả. Tôi đang thiếu gì?

Đây là một plnkr chứng tỏ vấn đề của tôi .

Câu trả lời:


251

Theo dõi của cần phải ở cuối biểu thức:

<li ng-repeat="person in attendees | filter: {arrived: false } track by person.id">

3
Làm thế nào lật khó chịu, và lãng phí 30 phút. Tôi ước nó được sử dụng trackBy: ..và hoạt động bình thường "như mọi thứ khác".
user2864740

Đây là một điểm rất quan trọng. Theo dõi theo các giá trị duy nhất phần lớn giống hệt nhau đối với hầu hết các ký tự đứng đầu, chúng tôi đã gặp lỗi trùng lặp vì theo dõi bằng không cuối cùng trong biểu thức. Imo lỗi khá khó hiểu.
Matt S

2

Câu trả lời của @ Gruff là đúng, nhưng chỉ để đưa ra câu trả lời từ một nguồn chính thức:

Từ ng-repeattài liệu Angular :

Lưu ý: track byphải luôn là biểu thức cuối cùng :

<div ng-repeat="model in collection | orderBy: 'id' as filtered_result track by model.id">
  {{model.name}}
</div>

Nó cũng xuất hiện trong phần "Đối số" của tài liệu:

Lưu ý rằng biểu thức theo dõi phải đứng sau cùng, sau bất kỳ bộ lọc nào và biểu thức bí danh.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.