ngRepeat 按深度属性过滤

Posted 2023-02-22

【中文标题】ngRepeat 按深度属性过滤

【英文标题】：ngRepeat Filter by deep property

【发布时间】：2015-02-20 18:47:22

【问题描述】：

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

这可以通过 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>

【参考方案1】：

最新版本的angularjs嵌套obj过滤器默认实现，可以正常使用过滤器。 它仅适用于角度 1

【讨论】：

亲爱的@Murali 以上解决方案仅适用于角度 1。

@Murali 我正在使用 Angular 4，但无法正常过滤记录

【参考方案2】：

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

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

[

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

【讨论】：

我觉得这个答案很混乱。它是如何回答问题的？

尊敬的先生（@Jason Swett），当我们有对象数组并且该对象中有另一个对象属性时，例如数组对象的“文档”属性，那么我们需要在控制器来实现类似“搜索”的功能。

【参考方案3】：

如果您要过滤多个属性，则语法类似于下面。

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

【参考方案4】：

你需要传入参数来过滤：

<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

【讨论】：

如果某些对象没有 manager 属性，即使过滤器为空，它们也不会出现。你知道包含它们的方法吗？

如果 Name 是一个数组并且我只想过滤 First-Name 怎么办？

@Bludwarf plnkr.co/edit/dMbYapbySJMGKiykvpG7?p=preview 也许这可以帮助某人