Question

我试图在角度Js中进行自动建议，如果我必须在数组中找到一个字符串，我可以使用indexOf方法，基于索引值，我可以得到建议。但是我应该如何匹配Object数组中的字符串？

我有一个对象数组

  $scope.array=[
            {"name":"stackoverflow","id":1},
            {"name":"sunny","id":2},
            {"name":"san","id":3},
            {"name":"bat","id":4},
            {"name":"ball","id":5}
          ]

所以在文本框中输入＆＃34; st＆＃34;，它应该给我一个数组的结果[{stackoverflow＆＃34;，＆＃34; id＆＃34;：1}]

如果我输入＆＃34; ba＆＃34;它应该给我一个数组的结果[{＆＃34; name＆＃34;：＆＃34; bat＆＃34;，＆＃34; id＆＃34 ：4}， {＆＃34;名称＆＃34;：＆＃34;球＆＃34;＆＃34; ID＆＃34;：5}]

控制器内部

$scope.searchString=function(){
//what logic should I write here?
}

Answer 1

您可以{/ 1}}使用

filter

<input type="text" ng-model="searchText" />
 <div ng-repeat="item in array | filter:{'name':searchText}">
 {{item}}
</div>

angular.module("app",[])
.controller("ctrl",function($scope){

$scope.array=[
            {"name":"stackoverflow","id":1},
            {"name":"sunny","id":2},
            {"name":"san","id":3},
            {"name":"bat","id":4},
            {"name":"ball","id":5}
          ]
})

使用自定义功能

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="searchText" />
 <div ng-repeat="item in array | filter:{'name':searchText}">
 {{item}}
</div>
</div>

angular.module("app",[])
    .controller("ctrl",function($scope){

    var backUp=[
                {"name":"stackoverflow","id":1},
                {"name":"sunny","id":2},
                {"name":"san","id":3},
                {"name":"bat","id":4},
                {"name":"ball","id":5}
              ]
    $scope.array = angular.copy(backUp)
    $scope.changeText = function(){ 
      $scope.array = backUp.filter(function(o){      
       return o.name.startsWith($scope.searchText)
      })
    }
    })

Answer 2

要直接回答您的问题，这应该有效：

$scope.searchString=function(str){
  const results = [];
  const len = str.length;
  for(const item of $scope.array){
    const test = item.name.substr(0, len);
    if(str === test){
      results.push(item);
    }
  }
  return results;
}

尽管如此，关于来自@sachila的过滤器的方法可能对你的情况有意义。

Answer 3

我可能会对数组使用.reduce（），然后检查每个对象项是否匹配。类似的东西：

var desiredResults = $scope.array.reduce(function(p,c){
    for(key in c){
        if(c[key].indexOf("valueToMatch") > -1){
            p.push(c);
            next();
        }
    }
    return p;
},[])

我没有测试过这段代码，但这是一般的想法。

Answer 4

以下是您的解决方案，

纯JS：

/*
input -> object array
searchStr -> string 
keyToSearch -> string array - match to restrict within given keys //eg:['name','id','somekey']
*/
function filterObjectArray(input, searchStr, keysToSearch){
  return input.filter(function(obj){
     var hasMatch = false;
     var hasKeySearch = (keysToSearch && keysToSearch.length)
     for(k in obj){
        if(!hasMatch){
           hasMatch = (!hasKeySearch || (hasKeySearch && keysToSearch.indexOf(k))) && (new RegExp(searchStr, 'gi')).test(obj[k]);
        }
     }
     return hasMatch;
  });
}

console.log(filterObjectArray($scope.array, 'ba')); //[{"name":"bat","id":4},{"name":"ball","id":5}]
console.log(filterObjectArray($scope.array, '1')); //[{"name":"stackoverflow","id":1}]
console.log(filterObjectArray($scope.array, 's', ['name'])); //[{"name":"stackoverflow","id":1},{"name":"sunny","id":2},{"name":"san","id":3}]

使用Angular，

解决方案1：

您可以在方法中使用$filter服务。

$scope.searchString = function(str){
   return $filter('filter')($scope.array, str);
};

解决方案2：

在模板中使用filter

<input type="text" ng-model="searchText" />
<div ng-repeat="item in array | filter:{'name':searchText}">
 {{item}}
</div>

在Object中搜索String

4 个答案: