通过深层属性进行ngRepeat过滤器

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>

- ExceptionLimeCat

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上的示例

- Ray

---

如果某些对象没有管理器属性，即使过滤器为空，它们也不会出现。您知道如何包含它们吗？ - Bludwarf

如果Name是一个数组，我想要过滤出“First-Name”，应该怎么做？ - rocketspacer

@Bludwarf http://plnkr.co/edit/dMbYapbySJMGKiykvpG7?p=preview 或许这个可以帮助到某些人。 - Rishabh Agrawal

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>

- Rob

Answer 3

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

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

[
{
   "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”返回筛选后的对象，代码示例如下 -

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输入标签），用户可以在其中输入要搜索的文本。

- Ravindra Vairagi

---

我觉得这个答案很令人困惑。它如何回答这个问题？ - Jason Swett

尊敬的Jason Swett先生，当我们有一个对象数组，并且该对象中有另一个对象属性，例如数组对象的“document”属性，那么我们需要在控制器中创建自定义过滤器来实现“搜索”功能。 - Ravindra Vairagi

Answer 4

在最新版本的AngularJS中，默认实现了嵌套对象过滤器，可以正常使用过滤器。这仅适用于Angular 1。

- Murali

---

亲爱的@Murali，上面的解决方案仅适用于Angular 1。 - Ravindra Vairagi

@Murali 我正在使用 Angular 4，但无法像平常一样过滤记录。 - Prashant Pimpale