ngRepeat Lọc theo thuộc tính sâu

Question

Nếu tôi có đối tượng phức tạp với đối tượng làm giá trị thuộc tính, làm cách nào tôi có thể lọc theo một trong các thuộc tính lồng nhau?

Điều này có thể thực hiện với bộ lọc ng-lặp OOB không?

liệu

{ 
    Name: 'John Smith', 
    Manager: { 
    id: 123, 
    Name: 'Bill Lumburg' 
    } 
} 

ngRepeat

<li ng-repeat="e in emps | filter:Manager.Name">{{ e.Name }}</li> 

Answer 1

Bạn cần phải vượt qua trong đối số để lọc theo:

<input ng-model="filter.key"> 
<ul> 
    <li ng-repeat="e in list | filter: {Manager: {Name: filter.key}}"> 
    {{e.Name}} (Manager: {{e.Manager.Name}}) 
    </li> 
</ul> 

Example on Plunker

Answer 2

Trong phiên bản mới nhất của angularjs bộ lọc obj lồng nhau được thực hiện theo mặc định.can sử dụng bộ lọc bình thường.

Answer 3

Để lọc với nhiều thuộc tính sâu, chúng tôi cần tạo bộ lọc tùy chỉnh. Những gì tôi có nghĩa là chúng ta cần phải tạo ra chức năng riêng của chúng tôi để lọc dữ liệu trong đối tượng và trả về đối tượng yêu cầu (đối tượng được lọc).

Ví dụ tôi cần để lọc dữ liệu từ bên dưới đối tượng -

[ 
{ 
    "document":{ 
     "documentid":"1", 
     "documenttitle":"test 1", 
     "documentdescription":"abcdef" 
     } 
}, 
{ 
    "document":{ 
     "documentid":"2", 
     "documenttitle":"dfjhkjhf", 
     "documentdescription":"dfhjshfjdhsj" 
     } 
} 
] 

Trong HTML chúng tôi sử dụng ng-repeat để hiển thị danh sách tài liệu -

<div> 
    //search input textbox 
    <input ng-model="searchDocument" placeholder="Search"> 
</div> 
<div ng-repeat="document in documentList | filter: filteredDocument"> 
    //our html code 
</div> 

Trong điều khiển chúng tôi viết chức năng lọc trở lại đối tượng được lọc bằng cách sử dụng hai thuộc tính của đối tượng là "documenttitle" và "documentdescription", ví dụ mã như sau -

function filterDocuments(document) 
     { 
      if($scope.searchDocument) 
      { 
        if(document.documentTitle.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1 || document.document.shortDescription.toLowerCase().indexOf($scope.searchDocument.toLowerCase()) !== -1) 
       { 
        //returns filtered object 
        return document 
       } 
      }else { 
       return document; 
      } 
     } 

Trường hợp $ scope.searchDocument là biến phạm vi được liên kết với hộp văn bản tìm kiếm (thẻ đầu vào HTML), trong đó người dùng có thể nhập văn bản để tìm kiếm.

Answer 4

Nếu bạn đang lọc nhiều thuộc tính thì cú pháp sẽ giống như dưới đây.

<ul> 
    <li ng-repeat="item in list | {filter: top_object_property_name: value, top_object_property_with_nested_objects_name: {nested_object_property_name: value}}"> 
     ... 
    </li> 
</ul> 

ví dụ:

 var employees = [name: 'John', roles: [{roleName: 'Manager'},{roleName: 'Supervisor'}]]; 

     <li ng-repeat="staff in employees | {filter: name: 'John', roles: {roleName: 'Manager'}}"> 
       ... 
     </li>