ユーザーの入力とオファーの完了を追跡する - 角度

Question

私は新しく角度があり、何か助けが必要です。 数字のリストを含むDBがあり、このリストを単語補完に使用したいとします。

が、これは私のフォームであると仮定します。ユーザーに応じ

  <!-- FORM --> 
      <form> 

       <!-- CODE --> 
        <label>code</label> 
        <input type="text" name="codeInput" placeholder="please insert your code..." > 

       <!-- SUBMIT BUTTON --> 
       <button type="submit" >Submit 
       </button> 
     </form> 

は私がオファーを取得し、それらを表示するoffers.phpへのAJAX呼び出しを作りたい、少なくとも5つの文字を挿入します。 AJAX呼び出しがフォーム

PHPのコードが動作しているを提出する前に、あることを

ノートは...私は、クライアント側で立ち往生しています。私はすべてのコンポーネントを接続する方法を見つけ出すことはできません

      $http({ 
         method : 'POST', 
         url  : 'offers.php', 
         data : $.param(code), 
         headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
         }) 
         .success(function(data) 
          { 
          //display the data somehow... 
         }); 

：

は、私は私のような何かをする必要があることを知っています。

Answer 1

OliverJ90の答えに少し変化があるはずです。あなたのhtmlでこれを行います。

<form> 
<!-- CODE --> 
    <label>code</label> 
    <input type="text" name="codeInput" placeholder="please insert your code..." ng-model="someValue" ng-change="myFunc()" > 
    <!-- SUBMIT BUTTON --> 
    <button type="submit" >Submit</button> 
</form> 

そして、あなたのjavascriptのは基本的にsomeValueの変数は、あなたの入力ボックスに双方向データバインディングを提供します。この

$scope.myFunc = function(){ 
    //Do the following if $scope.someValue.length >= 5 
    $http({ 
     method : 'POST', 
     url  : 'offers.php', 
     data : $scope.someValue, 
     headers : { 'Content-Type': 'application/x-www-form-urlencoded' } 
    }).success(function(data) { 
      //display the data somehow... 
    }); 
} 

のようになります。つまり、誰かがテキストボックス内の値を変更すると、変数の値が変更され、誰かが変数の値を変更した場合、入力ボックスの値が変更されます。これがng-modelを使用した理由です。 ng-changeは、changeイベントで関数を呼び出すのと同じですが、これは角度で提供されます。

ng-changeはng-modelを必要とするため、動作しない場合があります。

Answer 2

方法1：入力要素に

バインド：

使用ng-：yourValue

$scope.$watch(yourValue, function() { 
    //check length and call your function that makes the http request. 
}); 

方法2に変更

<input ng-model="yourValue"> 

コントローラウォッチで変更

お使いのコントローラで

<input ng-change="checkValue()" ng-model="yourValue"> 

：

$scope.checkValue = function() { 
    //do what you need to do. 
}