ajax – 如何使用angularjs实时创建搜索

发布时间：2020-12-16 01:37:05 所属栏目：百科来源：网络整理

导读：我想用 angularjs客户端和 java服务器端创建一个简单的实时搜索,我想在dom和ajax中使用与onKeyUp类似的效果,但是在角度js中, div ng-app="MyModule" ng-controller="MainCtrl" input class="form-control field span12" id="objctf" rows="4" ng-model="keyw

我想用 angularjs客户端和 java服务器端创建一个简单的实时搜索,我想在dom和ajax中使用与onKeyUp类似的效果,但是在角度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到您的输入,如下所示：

<input class="form-control field span12" id="objctf" rows="4" ng-model="keywords" ng-change="search()" />

创建一个方法来处理控制器上的更改：

myApp.controller('someCtrl',['$scope','someService',function($scope,someService){    
    $scope.search = function(){
        someService.search($scope.keywords).then(function(response){
            $scope.response = response.data;
        });
    };

}]);

最后,创建一个服务来调用服务器：

myApp.service('someService',['$http',function($http){
    return {
        search: function(keywords){
            return $http.post('/api/member/getuser',{ "username" : keywords });
        }
    }
}]);

以这种方式处理事物,您将获得一种可重复使用的搜索方法,如果需要,其结果可以通过路径保留.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!