Question

我在这里尝试做的就是在用户输入zipCode时向数据库发出ajax请求以查看它是否可用

一旦输入字段为5位数，我只需要它进行调用，如果数据库中存在代码，则应出现一个小的绿色复选标记，如果不是红色X标记则是出现的标记< / p>

＆＃13;

<input type="text" ng-model="checkname">

＆＃13;

Answer 1

您需要一个文本框更改事件的监听器：

<input type="text" ng-model="zip" ng-change="zipChanged()" />

然后在你的Angular控制器中：

function MyController($scope, $http) {
    $scope.zipChanged = function () {
        // would be better to use regex to check zip format.
        if ($scope.zip.length === 5) {
            $http({
                method: 'GET',
                url: '/checkZip/' + $scope.zip
            }).then(function(response) {
                // Check response and show red or green mark.
            });
        }
    }
}

注意，您不直接通过Ajax请求数据库。 Ajax可帮助您以异步方式与服务器通信。因此，您还需要一个具有操作/checkZip/{zip}的REST服务器，该服务器会根据数据库检查您的邮政编码并返回响应。

Answer 2

您可以尝试添加ngChange，然后检查长度

<input type="text" ng-model="checkname" ng-change="checkname()">

然后在您的控制器中

$scope.checkname = function(){
    //check the length of your variable and do something
}

Answer 3

您可以创建一个简单的custom async validator来进行检查。这样做的好处是它可以使用内置的Angular验证，以便更容易显示错误消息或阻止表单被回发。

这涉及使用指令将验证函数添加到$asyncValidators控制器的ng-model。此函数将发出$http请求并返回其承诺。如果这是有效的，那么验证将通过，否则它将失败。

以下是一个模拟$http调用的工作示例。只有当拉链是＆＃34; 90210＆＃34;。

时才会通过

＆＃13;

(function() {

  var app = angular.module('myapp', [])
  
  app.controller('ctrl1', function($scope) {
    $scope.myField = "";
  });
  
  app.directive('zipCheck', function($q) {
    return {
      require: 'ngModel',
      link: function(scope, elm, attrs, ctrl) {
        // add an async validator to the form's validators
        ctrl.$asyncValidators.zipCheck = function(modelValue, viewValue) {
  
          // don't validate if empty or less than 5 chars
          if (ctrl.$isEmpty(modelValue) || modelValue.length < 5) {
              return $q.resolve();
          }
          
          // the actual http call
          /*
          return $http.get('/checkZip?zip='+modelValue)
            .then(function(response) {
              // handle response as appropriate
              return response == "valid";
            });
          */
  
          // simulate the http request
          var deferred = $q.defer();
          window.setTimeout(function() {
            if(modelValue == "90210") {
              deferred.resolve();
            }
            else {
              deferred.reject();
            }
          }, 500);
          return deferred.promise;
            
        };
      }
    };
  });

})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app="myapp" ng-controller="ctrl1">

  <form name="myForm">
    <!-- note the zip-check attribute - this is the validation directive -->
    Zip Code: <input name="myField" ng-model="myField" zip-check />

    <!-- validation feedback - checking, invalid, valid -->
    <span ng-show="myForm.myField.$pending.zipCheck">...</span>
    <span ng-show="myForm.myField.$error.zipCheck">✖</span>
    <span ng-show="myField.length >= 5 && myForm.myField.$valid">✔</span>
  </form>

</div>

＆＃13;

角度的简单形式输入请求

3 个答案: