数组的角度过滤器数组答案

【问题标题】：Angular filter array of an array数组的角度过滤器数组
【发布时间】：2016-06-29 13:44:39
【问题描述】：

在过去的几天里，我在使用 Angular 过滤数组数组并显示它时遇到了困难。我曾尝试搜索类似的帖子，但找不到适合我的案例的解决方案。

我的数据的外观示例：

$scope.answers = [
    {title: "Qestion1", keywords: ["dino", "dog", "cat"]},
    {title: "Quessstion2", keywords: ["cat", "dog"]}
];

目前我正在显示一个列表：

<div class="solution-box" ng-repeat="answer in pagedItems[currentPage]">

我有两个搜索字段：

<input type="text" ng-model="title"  ng-change="search1()"  class="form-control" placeholder="Filter by title">
<input type="text" ng-model="keys"  ng-change="search2()" class="form-control" placeholder="Filter by keywords">

Search1() 功能正常：

$scope.search1 = function () {
     $scope.filteredItems = $filter('filter')($scope.answers, function (answer) {
         if (searchMatch(answer.title, $scope.title))
             return true;
         return false;
     });
     $scope.currentPage = 0;
     // now group by pages
     $scope.groupToPages();
 };

Search2() 函数不会改变过滤的项目

$scope.search2 = function () {
        $scope.filteredItems = $filter('filter')($scope.answers, function (answer) {
            return $filter('filter')(answer.keywords, function (keyword) {
                if (searchMatch(keyword, $scope.keys)) {
                    console.log($scope.filteredItems + '/' + keyword + '|' + $scope.keys);
                    return true;
                }
                return false;
            });
        });
        $scope.currentPage = 0;
        // now group by pages
        $scope.groupToPages();
    };

谁能给提示 Search2() 函数有什么问题？当我记录过滤项目时，它记录了我正确数量的答案，但列表仍然保持与原来相同的大小。我在这里缺少的自定义过滤器的主要逻辑是什么？

谢谢，

【问题讨论】：

我建议制作一个 jsfiddle/plunker。
$filter('filter') 将返回您传递给它的函数返回真实值的项目。使用search2，您将返回另一个$filter('filter') 的结果，这可能是一个数组，因此总是真实，因此不会进行过滤。您希望内部过滤器在那里做什么？
我认为 $filter('filter') 适用于一级数组，所以我想使用内部过滤器过滤关键字，然后用过滤后的关键字过滤答案。这个想法是通过过滤标题和关键字来显示列表。

标签： javascript arrays angularjs filter

【解决方案1】：

正如@mgilson 指出的，您需要从过滤器回调函数返回一个布尔值，但您返回的数组始终是真实的。这里也不需要使用$filter('filter')。你可以这样做：

$scope.filteredItems = $scope.answers.filter(function(answer) {
    var matches = answer.keywords.filter(function() {
        return searchMatch(keyword, $scope.keys);
    });
    return matches.length > 0;
});

【讨论】：