Question

我想用角度构建一个搜索表单。 如果需要，我可以给你一个Jsfiddle。 我有一个通过对象呈现的联系人列表。

联系对象示例：

{
  'name': ' Jon',
  'job' : 'developer',
  'country' : 'USA'
}

如果我在输入“Jon Developer USA”中写道，结果将是每个名为Jon的联系人，都是开发者并且住在美国......

我的html / angular loop + input：

<input ng-keyup="resultArrayFilterMultiple(searchResult)" ng-model="searchResult" type="text" name="">

<div ng-repeat="contact in contacts_result = (contacts | limitTo : limit)>....</div>

我的javascript：

  $scope.resultArrayFilterMultiple = function(searchTxt){

    var tableCur = searchTxt.toString().split(' ');
    var obj = {};

    if(tableCur.length > 0){
        var result = $scope.customFilter(tableCur, obj);
    }

};


 $scope.customFilter = function(tableCur, obj){

    for(var i = 0; i < tableCur.length; i++) {

        if (tableCur[i].length >= 3) {
            angular.forEach($scope.persons, function (contact) {
                if (contact.name.indexOf(tableCur[i]) >= 0 || contact.job.indexOf(tableCur[i]) >= 0 || contact.country.indexOf(tableCur[i]) >= 0) {
                    obj.push(contact);
                    $scope.persons = obj;
                }
            });

    }


};

有什么建议可以解决吗？它适用于第一个单词，但我不知道如何使用第二个或第三个单词进行过滤。

Answer 1

您可以使用AngularJS过滤器属性，如下所示。不需要JavaScript代码..

<ng-repeat="contact in contacts_result| filter: searchText">

Answer 2

您需要为此创建自定义适配器。类似的东西：

app.filter('customFilter', function() { 
    return function(input, searchCriteria) {
        var out = [];
        var searchCriteriaPieces = searchCriteria.split(" ");
        angular.forEach(input, function(item){
            if(//logic to decide if item meets searchcriteria){
               out.push(item);
            }
        })

        return out;
    }
}
});

使用类似

的html

<div ng-repeat="contact in contacts_result = (contacts | customFilter:searchResult)>....</div>

Answer 3

首先，您需要custom filter：

moduleName.filter('customFilter', function() {
    return function(input, searchText) {
        var out = [];
        angular.forEach(input, function(item) {
            for(var k in item) { /* walkthrough all properties */
                if( item[k] == searchText )  {
                    out.push(item);
                }
            }
        });
        return out;
    }
})

然后，使用正确的标记以指示Angular如何使用过滤器：

<div>
    <input ng-model="searchText" type="text" name="">
    <div ng-repeat="person in persons | customFilter:searchText">{{person.name}} {{person.country}} {{person.job}}</div>
</div>

您可能希望稍微改进一下以获得更好的搜索结果，例如修剪输入等

角度实时搜索

3 个答案: