javascript - 跟踪用户输入并提供单词完成- Angular

Question

我是 Angular 新手，我需要一些帮助。 假设我有一个包含数字列表的数据库，我想使用该列表来完成单词补全。

假设这是我的表格:

          <!-- FORM -->
          <form>

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

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

当用户插入至少 5 个字符时，我想对 offers.php 进行 ajax 调用以检索优惠并显示它们。

请注意，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 就会像这样

$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...
    });
}

基本上，someValue 变量将为您的输入框提供两种方式的数据绑定(bind)。也就是说，如果有人更改文本框中的值，则变量值将更改，如果有人更改变量值，则输入框值将更改。这就是我们使用 ng-model 的原因。 ng-change 就像在更改事件上调用函数一样，但这是由 Angular 提供的。

请注意，ng-change 需要 ng-model，没有它就无法工作。