How to combine input and HTTP get in angular

Question

I am trying to combine input text with HTTP get. I tried some methods it works but it' doesn't what I want. I have some URL like this http://localhost/web.php?tN=false&f5=kaka in f5 get some data from input in HTML. This my HTML

<div class="list">
    <label class="item item-input item-floating-label">
        <span class="input-label"><i class="glyphicon glyphicon-user"></i> Username</span>
        <input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-click="submitFunction()" required>
    </label>
    <label class="item item-input item-floating-label">
        <span class="input-label"><i class="glyphicon glyphicon-lock"></i> Password</span>
        <input id="inputPassword" class="form-control" placeholder=" Password" name="password" type="password" ng-model="loginData.password" required>
    </label>
</div>

and this my controller

$scope.submitFunction = function() {
    kaka.falselogin($scope.loginData.username).success(function(data) {
        console.log(data);
    });
};

My problem is that I must click after input in form username to get data. It's complicated if I must get data after input in form username anyone has an idea ? Please help me to solve my problem. Thanks

try ng-change. also debounce all elements which trigger a digest cycle. — Plankton
– Plankton, Commented May 29, 2017 at 7:10

Philipp Meissner · Accepted Answer · 2017-05-29 07:28:05Z

1

You can just use the ng-change directive. It'll run the provided function whenever the input`s value changed.

<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-change="submitFunction()" required>

Considering you issue HTTP requests on each change, you'd basically flood the server. To solve that issue you can debounce the model so that it takes x ms until the new value will be applied.

ng-model-options='{ debounce: 1000 }'

In combination it would look like this:

<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-model-options='{ debounce: 1000 }' ng-change="submitFunction()" required>

There you go :)

answered May 29, 2017 at 7:28

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nugka Over a year ago

Thanks it helpful

Collectives™ on Stack Overflow

How to combine input and HTTP get in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related