入力とHTTPを組み合わせる方法

Question

入力テキストとHTTP getを組み合わせようとしています。私はそれが動作するいくつかの方法を試みたが、それは私が望むものではない。私はこのようないくつかのURLを持っていますhttp://localhost/web.php?tN=false&f5=kaka のf5 HTMLの入力からいくつかのデータを取得します。この私の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> 

と、この私のコントローラ

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

私の問題は、私は、データを取得するために、フォームのユーザー名で入力した後、クリックしなければならないということです。フォームのユーザ名に入力した後にデータを取得する必要がある場合は、複雑です。 誰かがアイデアを持っていますか？私の問題を解決するのを助けてください。ありがとう

Answer 1

ng-changeディレクティブを使用できます。 入力の値が変更されるたびに、提供された関数を実行します。

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

変更ごとにHTTPリクエストを発行することを考慮すると、基本的にはサーバーがあふれます。 この問題を解決するには、新しい値が適用されるまでモデルをデバウンスしてxミリ秒かかるようにします。

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

組み合わせでは、次のようになります。そこ

<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> 

あなたは:)