Question

如果我有一个带有对象作为属性值的复杂对象，如何通过其中一个嵌套属性进行过滤？

可以使用OOB ng-repeat过滤器完成吗？

数据

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

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

在default.can实现的最新版本的angularjs嵌套obj过滤器中，通常使用过滤器。仅限角度1

Answer 4

要使用多个深层属性进行过滤，我们需要创建自定义过滤器。我的意思是我们需要创建自己的函数来过滤对象中的数据并返回所需的对象（过滤后的对象）。

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

[
{
   "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>

在Controller中，我们编写过滤函数，通过使用对象的两个属性来返回过滤对象，即“documenttitle”和“documentdescription”，代码示例如下 -

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是绑定到搜索文本框（HTML输入标记）的范围变量，用户可以在其中输入要搜索的文本。

ng按深属性重复过滤

4 个答案: