控制器中的角度嵌套过滤器

Question

我有要按标题（字符串）或标签（字符串数组）搜索的项目

项目：

[
  {
    title: 'My title',
    tags: ['tag1', 'other']
  },
  {
    title: 'Misc',
    tags: ['tag1', 'notag']
  }
]

我想要一个输入来搜索标题或标签

在我的模板中，这很好用：

<form>
    <input type="text" ng-model="query">
</form>

<li ng-repeat="item in items | filter:query:title | filter:query:tags">
    <p>{{item.title}}</p>
</li>

显示我的所有项目，如果我输入文本，它会按标题或标签进行过滤。 前任： 我输入title，只返回第一项，如果我输入tag1，两个都返回。

现在，我需要一个包含该搜索过滤器结果的其他范围。

在我的控制器/指令中，我尝试了：

scope.filteredItems = $filter('filter')($filter('filter')(scope.items, {title: scope.query}), {tags: scope.query});

但我没有相同的结果，我错过了什么？

Answer 1

首先，您在 HTML 中错误地使用了过滤器。如果您查看filter documentation，您会看到它需要一个表达式和一个比较器。因此，到目前为止，在 HTML 中，您将 query 作为表达式传递，将 title 或 tags 作为比较器传递，这两者都是未定义的。

因为你传递一个字符串作为表达式，

字符串被评估为表达式，结果值为 用于匹配数组内容的子字符串。全部 包含此的数组中具有字符串属性的字符串或对象 字符串将被返回。

换句话说，搜索每个项目中的所有属性以进行查询。这就是为什么它似乎被title 和/或tags 过滤的原因。

然后，在您的控制器中，您将一个对象作为表达式传递。这使得它实际上只返回给定属性与给定值匹配的项目。但是，由于您调用了两次，因此您正在过滤 title 和 tags 与您的 query 匹配的项目。

有两种方法可以解决此问题。

如果您不介意在所有字段中搜索query，您可以按以下方式执行此操作。在您的 HTML 中，替换为

<li ng-repeat="item in items | filter:query">

在你的控制器中，替换为

$scope.filteredItems = $filter("filter")($scope.items, $scope.query);

但是，如果您只想搜索 title 和 tags，则要复杂得多。请参阅这篇文章，了解如何创建搜索多个字段的自定义过滤器：

How to filter multiple values (OR operation) in angularJS