2017-03-01 116 views
4

首先,有点背景。基本上,我使用ng-repeat呈现表格中的对象列表。我的筛选器需要能够搜索字符串,并检查重复对象中的每个搜索项。每个搜索条件都需要在过滤器的任何对象属性中(以任何顺序)出现以传递该对象。例如,如果一个对象是这样的:Angular JS自定义过滤器

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

我的搜索文本是smith johndetails john smithsmith 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"> 

成绩

当我搜索'约翰史密斯','约翰'或'史密斯',它的作品 - 它只是拒绝工作,当我倒过来e字符串...当字符串反转为'Smith John'或更改为'Joh Smith'时,过滤器似乎根本不会被触发(在此情况下,过滤器函数开始处的控制台日志不会运行,所以它似乎没有做任何事情)。

回答

0

我会避免使用下划线和像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展示它是如何工作的真实环境:过滤器想被重写如下。