15

我正在尝试编写一个 angularjs 自定义过滤器来检查国家数组是否包含用户输入的搜索字符串。

字符串可以由一个字母（例如'E'）、n 个字母的片段（例如'lan'）或整个单词（例如'England'）组成。

在每种情况下，都应返回包含该字母或该片段的所有国家/地区，因此“E”将返回“England”、“Estonia”等，而“lan”将返回“England”、“Ireland”等。

到目前为止，我的过滤器返回整个国家或单个字母，但我在处理字符串片段时遇到了困难：

  1. HTML 模板：

    <input ng-model="filter.text" type="search" placeholder="Filter..."/>

<ul>
   <li ng-repeat="item in data | listfilter:filter.text">
</ul>

  2. 角JS

    angular.module('sgComponents').filter('listfilter',[ function () {
return function(items, searchText) {
    var filtered = [];            

    angular.forEach(items, function(item) {
        if(item.label === searchText) { // matches whole word, e.g. 'England'
            filtered.push(item);
        }
        var letters = item.label.split('');
        _.each(letters, function(letter) {
            if (letter === searchText) { // matches single letter, e.g. 'E'
                console.log('pushing');
                filtered.push(item);
            }
        });
        // code to match letter fragments, e.g. 'lan'
    });
    return filtered;
};
}]);
4

3 回答 3

28

它比这简单得多，使用String.indexOf()函数：

angular.forEach(items, function(item) {
    if( item.label.indexOf(searchText) >= 0 ) filtered.push(item);
});

您可能希望将两个字符串都.toLowerCase()转换为不区分大小写的匹配：

searchText = searchText.toLowerCase();
angular.forEach(items, function(item) {
    if( item.label.toLowerCase().indexOf(searchText) >= 0 ) filtered.push(item);
});
于 2013-10-16T14:08:28.790 回答
7 
angular.module('sgComponents').filter('listfilter',[ function () {
    return function(items, searchText) {
        var filtered = []; 
        var regex = new RegExp(".*" + searchItem + ".*", "ig");
        angular.forEach(items, function(item) {
            if(regex.test(item)){
                filtered.push(item);
            }
        });
        return filtered;
    }
}]);
于 2013-10-16T14:07:35.620 回答
0

看看 Angular-UI-Bootstrap 指令，因为typeahead它完全符合您的要求：http ://angular-ui.github.io/bootstrap/#/typeahead

于 2013-10-16T14:06:10.127 回答