ngRepeat按深度属性过滤

如果我有一个复杂的对象作为属性值的对象，我怎么能过滤一个嵌套的属性？

这可以用OOB ng-repeatfilter来完成吗？

数据

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

ngRepeat

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

Answer 1

你需要传递参数来过滤：

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

例子在Plunker

Answer 2

如果你正在过滤多个属性，那么语法将类似于下面。

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

例如：

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

Answer 3

要筛选多个深度属性，我们需要创build自定义筛选器。 我的意思是我们需要创build自己的函数来过滤对象中的数据并返回所需的对象（过滤对象）。

例如，我需要从下面的对象过滤数据 –

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

在HTML中，我们使用ng-repeat来显示文档列表 –

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

在控制器中，我们使用“documenttitle”和“documentdescription”这两个对象的属性来编写filter函数来返回过滤对象，代码示例如下：

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

其中$ scope.searchDocument是绑定到search文本框（HTMLinput标签）的范围variables，用户可以在其中input要search的文本。

Answer 4

在默认情况下实现的最新版本的angularjs嵌套objfilter。通常使用filter。