如何使用angularjs实时创建搜索 [英] How to create a search in real time with angularjs
本文介绍了如何使用angularjs实时创建搜索的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想用angularjs客户端和Java服务器端创建一个简单的实时搜索,我想在dom和ajax中使用与onKeyUp类似的效果,但是在angular js中使用
I want to create a simple real-time search with angularjs client side, and java server side, i want to use the similar effect than onKeyUp in dom and ajax but in angular js,
<div ng-app="MyModule" ng-controller="MainCtrl">
<input class="form-control field span12" id="objctf" rows="4" ng-model="keywords" />
<a href="/adminpanel?q=" class="btn btn-primary">Manage</a>
<div>
<p ng-show="loading">Loading...</p>
<p ng-hide="loading">Response: {{response}}</p>
<p ng-hide="loading">writed: {{keywords}}</p>
</div>
</div>
var MainCtrl = function($scope, $http) {
$scope.keywords = "debut";
alert ('en mode ajax '+$scope.keywords);
$scope.response = $http.post('/api/member/getuser', { "username" : $scope.keywords });
};
推荐答案
将ng-change添加到您的输入中,如下所示:
Add ng-change to your input like so:
<input class="form-control field span12" id="objctf" rows="4" ng-model="keywords" ng-change="search()" />
创建一种方法来处理控制器上的更改:
Create a method to handle the change on the controller:
myApp.controller('someCtrl', ['$scope', 'someService', function($scope, someService){
$scope.search = function(){
someService.search($scope.keywords).then(function(response){
$scope.response = response.data;
});
};
}]);
最后,创建一个服务以调用服务器:
Finally, create a service to make the call to the server:
myApp.service('someService', ['$http', function($http){
return {
search: function(keywords){
return $http.post('/api/member/getuser', { "username" : keywords });
}
}
}]);
以这种方式处理事物,您将获得一种可重复使用的搜索方法,该搜索方法的结果可以根据需要通过路由保留.
Handling things in this fashion, you'll gain a re-usable search method whose results can be persisted through routes if needs be.
这篇关于如何使用angularjs实时创建搜索的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文