javascript - 数组的 Angular 过滤器数组

标签 javascript arrays angularjs filter

在过去的几天里,我在使用 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();
 };

不改变 filteredItems 的 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() 函数中可能出现的问题吗? 当我记录 filteredItems 时,它记录了我正确数量的答案,但列表仍然保持原来的大小。 我在这里缺少的自定义过滤器的主要逻辑是什么?

谢谢,

最佳答案

正如@mgilson 所指出的,您需要从过滤器回调函数返回一个 bool 值,但您返回的是一个始终为真值的数组。这里也不需要使用$filter('filter')。你可以做这样的事情:

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

关于javascript - 数组的 Angular 过滤器数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35988916/

相关文章:

php - 通过关键交集创建搜索=>替换数组

php - 如何使用 angularjs 和 php 从数据库中获取最后插入的记录?

javascript - 在网格上将矩形元素旋转 90 度

javascript多维数组

javascript - 停止内容在粘性 div 下占用空间

改变数组长度

javascript - 用javascript替换图像src

java - 从数组中读取并计算平均值

angularjs - 使用 Ionic 框架将事件添加到设备日历

javascript - AngularJS + HTML5 录制音频文件