2014-09-16 17 views
5

Tại sao giá trị hiển thị không góc cạnh được null khi tôi áp dụng:ng-repeat lọc giá trị null không hiển thị

ng-repeat="p in foo | filter: filter2" 

nơi bộ lọc2 là

$scope.filter2 = function(p){ 
    if (p.state === null){ 
     return p.state; 
    } else{ 
     return; 
    } 
}; 

đây là một plnkr với những gì tôi nói rằng: http://plnkr.co/edit/cj3v1fuBu6sHVI7A4qlq?p=preview

Bộ lọc hoạt động khi không có gì ngoài giá trị rỗng nhưng tôi đang cố gắng chỉ hiển thị các giá trị rỗng. Tôi có thể thử thay đổi tất cả các giá trị null thành một chuỗi giá trị mặc định khác với một null? Có nơi nào để bộ lọc hoạt động với null không?

+0

giải pháp khác nhau: https://stackoverflow.com/a/24992197/257470 –

Trả lời

6

Tôi nghĩ rằng điều duy nhất sai là bạn cần trả lại toàn bộ đối tượng.

Dựa trên nhận xét của Brad bên dưới, tôi đã đi kiểm tra tài liệu và anh ấy đã đúng. Lý do duy nhất mà mẫu mã của tôi hoạt động là vì nó trả về giá trị 'trung thực'.

Tôi đã sửa đổi ví dụ về mã bên dưới để tính đến điều đó.

Dưới đây là bộ lọc:

$scope.filter2 = function(p){ 
    if (p.state === null){ 
     return true; 
    } else{ 
     return; 
    } 
}; 

Dưới đây là phần có liên quan trong các tài liệu:

chức năng (thực tế, dự kiến): Chức năng này sẽ được cung cấp các giá trị vật thể và giá trị ngữ để so sánh và phải trả về true nếu mục phải được bao gồm trong kết quả được lọc.

plunkr

+0

haha, tôi hiểu bạn đã làm gì. Bạn trả lại p thay vì p.state. Nếu nó hoạt động nó hoạt động ... Trong javascript bạn có thể không trả về một giá trị null? Tôi nghĩ bạn có thể. – Garuuk

+0

Bạn có thể, nhưng có lẽ ng-lặp lại không thích nó –

5

| filter:{expression} đang mong đợi một true hoặc false đánh giá, không phải là một đối tượng. Do đó:

$scope.filter1 = function(p){ 
    return (p.state === 'on'); 
}; 

$scope.filter2 = function(p){ 
    return (p.state === null); 
}; 
14

Bạn có thể lọc các mục rỗng mà không cần viết bộ lọc tùy chỉnh.

Sử dụng mã trong liệng bạn, điều này sẽ trở lại với mục null:

<ul ng-repeat="p in foo | filter:{state:'!'}" > 
    <li>{{p.name}}</li> 
</ul> 

Ngược lại, điều này sẽ trả về tất cả các mặt hàng không null:

<ul ng-repeat="p in foo | filter:{state:'!!'}" > 
    <li>{{p.name}}</li> 
</ul> 

không phải điều hành kép chuyển đổi bất kỳ giá trị boolean: toán tử đầu tiên không ! chuyển đổi giá trị trung thực thành boolean false, giá trị thứ hai sẽ đảo ngược boolean trở lại thành true. Trong các thử nghiệm của tôi các bộ lọc thực sự hoạt động chỉ bằng cách sử dụng state:'' nhưng tôi sẽ sử dụng !! chỉ để được ở bên an toàn ...

0

Bạn có thể kiểm tra cho Null trong biểu thức như thế này:

ng-repeat="p in foo | filter:{state:null}" 
Các vấn đề liên quan