Question

首先，有点背景知识。基本上，我使用ng-repeat渲染表格中的对象列表。我的过滤器需要能够获取搜索字符串，并检查重复的对象中的每个搜索项。每个搜索项都需要（以任何顺序）存在于过滤器传递该对象的任何对象属性中。例如，如果对象看起来像这样：

{
    customer: 'John Smith',
    detail: 'Some details'
}

我的搜索文字是smith john或details john smith或smith john details，它需要能够以任何顺序获取这些字词，并找到匹配的对象。上述对象应该匹配，因为所有搜索词都存在。

我写的过滤器如下：

angular.module('app').filter('assetsearch', function () {
return function (input, searchString) {

    var searchTerms = searchString === '' ? [] : searchString.replace(/  +/g, ' ').replace(/[^\w\s]|_/g, '').toLowerCase().split(' ');

    var matches = _.filter(input, function (asset) {
        var textToSearch = [
            asset.customer,
            asset.details
        ];

        textToSearch = textToSearch.join(' ').replace(/  +/g, ' ').replace(/[^\w\s]|_/g, "").toLowerCase();

        var match = true;
        _.each(searchTerms, function (term) {
            match = (textToSearch.trim().indexOf(term) > -1) && match;
        });

        return match;
    });

    return matches;
}
});

我的模板代码看起来非常标准，其中$ctrl指的是模板的组件控制器：

<tr ng-repeat="asset in $ctrl.assets | assetsearch:$ctrl.filters.search" ng-if="!asset.loading">

结果

当我搜索John Smith＆＃39; John＆＃39; John＆＃39;或者＆＃39;史密斯＆＃39;它有效 - 它只是在我反转字符串时拒绝工作...当字符串被反转为史密斯约翰＆＃39;或者更改为＆＃39; Joh Smith＆＃39;，过滤器似乎根本没有被触发（过滤器开头的控制台日志功能在这种情况下不运行，所以它似乎没有做任何事情。）

Answer 1

我会避免使用下划线和类似app.filter('assetsearch', function() { return function(input, term) { var obj = {}; if (typeof term !== 'undefined') { angular.forEach(input, function(v, i){ var terms = term.split(" "); angular.forEach(terms, function(v2, i2){ if( v.toLowerCase().indexOf(v2.toLowerCase()) !== -1){ obj[i] = v; } }); }); } else { return input; } return obj; }; });的方法来使用angularjs对嵌套的forEach循环做一些更简单的操作。过滤器将重写如下：

IRR symptom end datetime
     Base    Compare
   IREDTM     IREDTM      Diff.
_________  _________  _________

14NOV2016  14NOV2016    59.0000

我还创建了一个Plunker来展示它在真实环境中的工作原理。

Angular JS自定义过滤器

1 个答案: