Angularjs智能表自定义过滤器使用空格搜索多词过滤器答案

【问题标题】：Angular Js Smart Table custom filter to search muti word filter using spaceAngularjs智能表自定义过滤器使用空格搜索多词过滤器
【发布时间】：2021-03-20 21:12:29
【问题描述】：

过去五个小时，我一直在为自定义过滤器指令而苦苦挣扎。我是angularjs的初学者。我有一张桌子，除了过滤器外，所有需要。我想要在单个搜索文本框中使用空格的全局多字符串过滤器。这是我的代码：

app.filter('multiWordFilter', ['$filter', function ($filter) {

    // function that's invoked each time Angular runs $digest()
    return function (input, predicate) {
        var searchValue = predicate['$'];
        //console.log(searchValue);
        var customPredicate = function (value, index, array) {
            console.log(value);
            // alert(searchValue);

            // if filter has no value, return true for each element of the input array
            if (typeof searchValue === 'undefined') {
                return true;
            }
            var propList = Object.getOwnPropertyNames(value) || [];
            var splitValue = (searchValue || '').split(' ');
            var resultArray = [];
            for (var i = 0; i < propList.length; i++) {
                var prop = propList[i];
                if (typeof value[prop] !== 'string')
                    continue;

                for (var j = 0; j < splitValue.length; j++) {
                    var searchText = splitValue[j];
                    if (!searchText)
                        continue;

                    var index = (String)(value[prop]).toLowerCase().indexOf(searchText.toLowerCase());
                    if (index > -1) {
                        trueList.push(true);
                        break;
                    }
                }
            }
            return trueList.length
        }
        return $filter('filter')(input, customPredicate, false);
    }
}])

以上代码仅适用于单个字符串搜索，并且我尝试使用空格分割多个字符串例如 |姓名|联系方式| |:阿斯拉夫|8765270810| |:内存|8765270810|

搜索词如 8754270810 Asraf

只返回第一个搜索结果，而不是第二个。

我期待

搜索词如 8754270810 将返回两条记录搜索词就像 8754270810 Asraf 将返回一条记录

提前谢谢各位。

【问题讨论】：

试试这个。 stackoverflow.com/a/19405684/5781575
@tbone849 感谢您的评论，但在单行搜索中可能无法使用多个属性以及由空格分隔的多个单词。
嗯。看看这个。 stackoverflow.com/a/31370761/5781575
@tbone849，非常感谢，对我的代码进行小改动以实现我的期望。只需使用等于拆分值计数的 searchCount。

标签： angularjs smart-table

【解决方案1】：

我找到了解决上述问题的方法。

app.filter('multiWordFilter', ['$filter', function ($filter) {
    // function that's invoked each time Angular runs $digest()
    return function (input, predicate) {
        var searchValue = predicate['$'];
        var customPredicate = function (value, index, array) {

            // if filter has no value, return true for each element of the input array
            if (typeof searchValue === 'undefined') {
                return true;
            }
            var propList = Object.getOwnPropertyNames(value) || [];
            var splitValue = ((String)(searchValue).trim() || '').split(' ');

            if (!splitValue.length)
                return true;

            var searchCount = 0;
            for (var j = 0; j < splitValue.length; j++) {
                var searchText = splitValue[j];
                if (!searchText)
                    continue;
                for (var i = 0; i < propList.length; i++) {
                    var prop = propList[i];
                    if (typeof value[prop] !== 'string')
                        continue;

                    var index = (String)(value[prop]).toLowerCase().indexOf(searchText.toLowerCase());
                    if (index > -1) {
                        searchCount++;
                        break;
                    }
                }
            }
            return (searchCount == splitValue.length)
        }
        return $filter('filter')(input, customPredicate, false);
    }
}])

在这里，当拆分搜索文本值计数和搜索计数相等时，只有匹配的记录可用。

在我的例子中，假设一个网格有 10 行，搜索文本是：'Dog eat'。现在实际会发生什么，首先使用 Dog 过滤，现在我们有 7 行，然后现在在之前的过滤器中使用 eat 过滤，我们已经得到 7 行，最后我们得到4行。这是我真正想要的输出。

感谢为我的问题花费宝贵时间的各位。

【讨论】：