Angular：如何通过数组中的深层对象属性进行过滤？答案

【问题标题】：Angular: How to filter by deep object property in array?Angular：如何通过数组中的深层对象属性进行过滤？
【发布时间】：2015-07-20 16:44:13
【问题描述】：

我有一个像这样格式化的对象：

id: 1,
name: MyObj
properties: {
  owners: [
  {
    name:owner1,
    location: loc1
  },
  {
    name:owner2,
    location: loc1
  }
 ]
}

每个对象的所有者数量不同。当我尝试使用ng-repeat 和filter:searchBox 和搜索框输入过滤它时

<input name="search-filter" class="form-control" type="search" ng-model="searchBox.properties.title" />
<input name="search-filter" class="form-control" type="search" ng-model="searchBox.properties.owners" />

按标题过滤效果很好，但是所有者过滤根本不起作用，但我认为它会根据位置和名称进行过滤。我做错了什么？

【问题讨论】：

您想在所有者对象中搜索什么？ name或位置
@PankajParkar 我有另一个像这样的对象，其中所有者没有嵌套在属性中，并且它在所有所有者参数上都可以正常工作。但是，在那种情况下，当我尝试按名称或位置进行过滤时，我什么也得不到。当所有者数组嵌套时，我只是不知道该怎么做。似乎 Angular 只通过一些嵌套属性

标签： javascript angularjs filter

【解决方案1】：

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.objs = 
  {
    id: 1,
    name: 'MyObj',
    properties: {
      owners: [
      {
        name: 'owner1',
        location: 'loc1'
      },
      {
        name: 'owner2',
        location: 'loc2'
      }
     ]
    }
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

<input name="search-filter" class="form-control" type="search" placeholder="Search by location" ng-model="searchBox.properties.location" />
<input name="search-filter" class="form-control" type="search" placeholder="Search by name"   ng-model="searchBox.properties.owners" />
 
  <div ng-repeat="owner in objs.properties.owners | filter:{'location': searchBox.properties.location} |filter:{'name': searchBox.properties.owners}">
    {{owner}}
    
  </div>

</div>

【讨论】：

在您的 sn-p 中完美运行，但在我的代码中根本无法运行 >_
我该怎么做？它不适合评论

【解决方案2】：

您可以手动过滤

var list = [
  {
    id: 1,
    name: 'MyObj',
    properties: {
      owners: [
      {
        name: 'owner1',
        location: 'loc1'
      },
      {
        name: 'owner2',
        location: 'loc1'
      }
     ]
    }
  }
];

function filter(filter) {
  return list.filter(function(item) {
    return item.properties.owners.find(function(owner) {
      return Object.keys(filter).every(function(key) {
        return filter[key] === owner[key];
      });
    });
  });
}

console.log(filter({ name: 'owner1', location: 'loc1' }));

我为此使用了 es6 shim。

【讨论】：