admin管理员组

文章数量:1287632

I'm new to AngularJS.

I want to set it up so that as I type, I send a GET request, but only if what I've typed in the input field is at least three characters long.

Here's index.html:

<html ng-app="myApp">
<div ng-controller="fetchTagsCtrl">
    <input type="text" ng-model="userInput.fetchTag" placeholder="Type something">
</div>
</html>

My Javascript:

var app = angular.module('myApp',[]);
app.controller('fetchTagsCtrl',function($scope){
    $scope.userInput = {
        fetchTag: ''
    };

    $http({
        url: '/myURL',
        method: 'GET',
        param: {
            someParameter: $scope.userInput
        }
    }).success(function(response){
        console.log(response);
    })
});

But this doesn't seem to work. How do I fix this?

I'm new to AngularJS.

I want to set it up so that as I type, I send a GET request, but only if what I've typed in the input field is at least three characters long.

Here's index.html:

<html ng-app="myApp">
<div ng-controller="fetchTagsCtrl">
    <input type="text" ng-model="userInput.fetchTag" placeholder="Type something">
</div>
</html>

My Javascript:

var app = angular.module('myApp',[]);
app.controller('fetchTagsCtrl',function($scope){
    $scope.userInput = {
        fetchTag: ''
    };

    $http({
        url: '/myURL',
        method: 'GET',
        param: {
            someParameter: $scope.userInput
        }
    }).success(function(response){
        console.log(response);
    })
});

But this doesn't seem to work. How do I fix this?

  • javascript
  • angularjs
Share Improve this question asked Apr 11, 2015 at 3:41 UsernameUsername 3,66311 gold badges70 silver badges121 bronze badges 3
  • bind keyup event and fire the $http – mohamedrias Commented Apr 11, 2015 at 3:42
  • @mohamedrias Where would I add the keyup event? – Username Commented Apr 11, 2015 at 3:44
  • You need to bind it to your input text box. I've mentioned it in my answer. – mohamedrias Commented Apr 11, 2015 at 3:46
Add a ment  | 

4 Answers 4

Reset to default 6

You must use keyup event for that.

<input type="text" ng-model="userInput.fetchTag" ng-keyup="fetchdata()" placeholder="Type something">

In your controller:

$scope.fetchdata = function() {
  // condition to check for characters greater than 3.
  if($scope.userInput.fetchTag.length < 4) return;
  $http({
        url: '/myURL',
        method: 'GET',
        params : {
            someParameter: $scope.userInput
        }
    }).success(function(response){
        console.log(response);
    });
}

Also inject $http in your controller.

Your html dom was right. Just simply change would be on your script. Follow the step which provided below

Step 1: Inject $http to your controller Ex: app.controller('fetchTagsCtrl',function($scope,$http)

Step 2: Use $scope.$watch to get your typing event from your input

Let's look at the code below will be look like

var app = angular.module('myApp',[]);
app.controller('fetchTagsCtrl',function($scope,$http){
$scope.userInput = {
    fetchTag: ''
};
$scope.$watch('userInput.fetchTag',function(){
    $http({
        url: '/myURL',
        method: 'GET',
        param: {
            someParameter: $scope.userInput
        }
    }).success(function(response){
        console.log(response);
     })
    });
});

You can use ng-change directive instead of ng-keyup .because for every change in input it calls to the fetchdata method in controller.

<input type="text" ng-model="userInput.fetchTag" ng-change="fetchdata(userInput.fetchTag)" placeholder="Type something">

$scope.fetchdata = function() {
  // condition to check for characters greater than 3.
  if($scope.userInput.fetchTag.length > 3) 
  $http({
        url: '/myURL',
        method: 'GET',
        params : {
            someParameter: $scope.userInput
        }
    }).success(function(response){
        console.log(response);
    });
}

Watch the model for changes, do a check, then fire your request. Here's how I'd write it:

app.controller('fetchTagsCtrl',function($scope){
    $scope.userInput = {
        fetchTag: ''
    };;

    $scope.$watch('userInput.fetchTag',function(value){
        if(value.length >= 3){
            makeRequest();
        }
    });

    function makeRequest(){
        $http({
            url: '/myURL',
            method: 'GET',
            param: {
                someParameter: $scope.userInput.fetchTag
            }
        }).success(function(response){
            console.log(response);
        })
    }
});

本文标签： javascriptHow do I send a GET request while typing in AngularJSStack Overflow

版权声明：本文标题：javascript - How do I send a GET request while typing in AngularJS? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741308889a2371534.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。