我对角度很新,所以这可能非常简单,但我似乎无法让它发挥作用。我有一个应用程序,其搜索字段需要在用户输入时主动过滤结果。我的所有数据都在searchResults对象中。当我输入文本框时没有任何反应。我错过了什么?在此先感谢您的帮助。
<div>
<input ng-model="query" name="search" id="search" type="text" placeholder="search by product or category">
<ul id="filteredResults" ng-if="results.length">
<li ng-repeat="result in results | filteredSearchFilter | limitTo: 10">{{result.name}}</li>
</ul>
</div>
filteredSearch.filter.js
module.exports = function() {
return function(data, keys, query) {
results = [];
if( !query ){
return data;
} else {
angular.forEach( data, function( obj ){
var matched = false;
angular.forEach( keys, function( key ){
if( obj[key] ){
// match values using angular's built-in filter
if ($filter('filter')([obj[key]], query).length > 0){
// don't add objects to results twice if multiple
// keys have values that match query
if( !matched ) {
results.push(obj);
}
matched = true;
}
}
});
});
}
return results;
};
答案 0 :(得分:0)
您可以使用角度过滤器,并使用ng-model变量作为过滤器
<li ng-repeat="result in results | filter:query">
<div>
{{result .firstname}} {{result .lastname}}
</div>
</li>
angular.module('myApp', [])
.controller('myCtrl', function($scope){
$scope.results = [
{firstname: 'john', lastname: 'smith'},
{firstname: 'jane', lastname: 'due'},
{firstname: 'bob', lastname: 'rand'}
];
});
&#13;
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller='myCtrl'>
<div>
<div>
<input type="text" placeholder="Search" ng-model="query">
</div>
</div>
<ul>
<li ng-repeat="result in results | filter:query">
<div>
{{result .firstname}} {{result .lastname}}
</div>
</li>
</ul>
</body>
</html>
&#13;