AngularJS - 在Javascript中过滤嵌套对象

时间:2016-01-02 23:44:59

标签: angularjs filter

我有一个嵌套对象如下:

[
  {
    "$id": "25",
    "Field": {
      "$id": "26",
      "Key": "bb3927b1-fcbb-4fc4-8eff-24b7a20fad7b",
      "EntityKey": "e904000c-b0b8-49ca-8a49-42a2e5b5d295",
      "PostalCode": "12345",
      "City": "My city1"
    },
    "EntityId": "MyEntity"
  },
  {
    "$id": "27",
    "Field": {
      "$id": "28",
      "Key": "ad4f2cb5-7397-474d-aed7-ff4bcc14d292",
      "EntityKey": "e904000c-b0b8-49ca-8a49-42a2e5b5d295",
      "PostalCode": "67890",
      "City": "My city2"
    },
    "EntityId": "MyEntity"
  }
]

在我的HTML页面中,我想按PostalCode或City过滤:

<select ng-model="filterBy" ng-init="filterBy='EntityId'">
  <option value="EntityId">Entity</option>
  <option value="Field.PostalCode">PostalCode</option>
  <option value="Field.City">City</option>
</select>
<input type="text" ng-model="query[filterBy]" autofocus />

在JavaScript中使用该功能:

$filter('filter')(array, expression, comparator)

我只能看到正在运行的EntityId,而不能查看其他字段。

P.S:我知道如何在HTML绑定中使用它:

    | filter: {Field: {City: 'my-value'}} 

我的目的是使用JavaScript中的过滤器来做同样的事情。

感谢您的帮助。

奥马

2 个答案:

答案 0 :(得分:1)

那么,你尝试过哪部分不起作用? 这是一个plnkr,用于演示html和js中的过滤器。

$scope.filteredList = $filter('filter')($scope.list, {
  Field: {Name: 'City'}
});

答案 1 :(得分:1)

您可以像这样使用$filter来深深匹配所有字段:

$filter('filter')($scope.unfilteredList, {$: '67890'});

或使用功能:

$filter('filter')($scope.unfilteredList, function(fullObject){
  // assuming $scope.filterBy contains the string `PostalCode`
  return fullObject.Field[$scope.filterBy] === '67890';
});