我试图在角度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}
]
所以在文本框中输入" st",它应该给我一个数组的结果[{stackoverflow"," id":1}]
如果我输入" ba"它应该给我一个数组的结果[{" name":" bat"," id&#34 :4}, {"名称":"球"" ID":5}]
控制器内部
$scope.searchString=function(){
//what logic should I write here?
}
答案 0 :(得分:2)
您可以{/ 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)
})
}
})
答案 1 :(得分: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的过滤器的方法可能对你的情况有意义。
答案 2 :(得分:2)
我可能会对数组使用.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;
},[])
我没有测试过这段代码,但这是一般的想法。
答案 3 :(得分:2)
以下是您的解决方案,
纯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>