Angular JS 自定义过滤器

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 '，' John '或' Smith '时，它可以正常工作 - 但是当我反转字符串时，它就无法工作了... 当字符串被反转为'Smith John'或更改为'Joh Smith'时，该过滤器似乎根本没有被触发（在过滤器函数的开头记录一个控制台日志在这种情况下不运行，因此似乎什么也没有做）。

- Jayps

Answer 1

我建议避免使用下划线和像replace()这样的方法，而是使用angularjs中嵌套的forEach循环来做一些更简单的事情。过滤器将被重写如下：

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;
  };
});

我还创建了一个Plunker以展示它在真实环境中的工作方式。

- Icarus