Question

我有一个代码，我试图在角度控制器中访问ng-model值，但每次尝试调用ng-model值时都会undefined。

代码

＆＃13;

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {

  $scope.phoneNumberValidation = function(phoneNumber) {
    if ($scope.phoneIsVisited == false) {
      $scope.phoneIsVisited = true;
    }

    if (!isNaN(phoneNumber) && phoneNumber.length === 11) {
      $scope.phoneNumberErrorShow = false;
      $scope.pincodeErrorshow = false;
      $scope.phoneNumbervalid = true;
    } else if ($scope.postCodeIsvisited) {
      console.log("went till here");
      console.log(phoneNumber);
      if (!phoneNumber === undefined) {

        console.log("inside else");
        $scope.phoneNumberErrorShow = true;
        $scope.phoneNumbervalid = false;

      } else {

        $scope.phoneNumberErrorShow = true;
        $scope.pincodeErrorshow = true;
        $scope.phoneNumbervalid = false;
      }
    }

  };


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-md-4" ng-app="app" ng-controller="ctrl">
  <input type="text" minLength="10" maxLength="11" data-ng-model="phoneNumber" data-ng-blur="phoneNumberValidation(phoneNumber)" name="phoneNumber" class="form-control" data-sly-test=${!properties.phoneno} placeholder="Phone number" />
  <input type="text" minLength="10" maxLength="11" data-ng-model="phoneNumber" data-ng-blur="phoneNumberValidation(phoneNumber)" name="phoneNumber" class="form-control" data-sly-test=${properties.phoneno} placeholder="${properties.phoneno}" />
  <span class="error_msg" data-ng-show="phoneNumberErrorShow">Please enter a valid phone number</span>
</div>

＆＃13;

Answer 1

问题在于您在输入中设置的minlenght和maxlength条件。

因此，除非模型值达到这些限制，否则它们永远不会反映/粘合到模型值。

Answer 2

phoneNumber需要在范围内。

因此将其设置为$ scope.phoneNumber，而不是在函数的参数中设置phoneNumber。

更新

在控制器中，在函数之前，设置$ scope.phoneNumber = null; 删除该函数的phoneNumber参数，并将所有phoneNumber替换为$ scope.phoneNumber。

在视图中，在调用函数时删除参数。

Answer 3

我认为你有IF条件的问题。如果声明，它不会进入其他内部。在进行验证之前检查“$scope.phoneIsVisited”变量是否为真

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {

  $scope.phoneNumberValidation = function(phoneNumber) {

   //Alert if it is defined
    if (phoneNumber !== undefined) {
      alert("Phone Number:" + phoneNumber);
    }
    if ($scope.phoneIsVisited == false) {
      $scope.phoneIsVisited = true;
    }

    if (!isNaN(phoneNumber) && phoneNumber.length === 11) {
      $scope.phoneNumberErrorShow = false;
      $scope.pincodeErrorshow = false;
      $scope.phoneNumbervalid = true;
    } else if ($scope.postCodeIsvisited) {
      console.log("went till here");
      console.log(phoneNumber);
      if (phoneNumber !== undefined) {
        alert("Phone Number:" + phoneNumber);
        console.log("inside else");
        $scope.phoneNumberErrorShow = true;
        $scope.phoneNumbervalid = false;

      } else {

        $scope.phoneNumberErrorShow = true;
        $scope.pincodeErrorshow = true;
        $scope.phoneNumbervalid = false;
      }
    }

  };


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-md-4" ng-app="app" ng-controller="ctrl">
  <input type="text" minLength="10" maxLength="11" data-ng-model="phoneNumber" data-ng-blur="phoneNumberValidation(phoneNumber)" name="phoneNumber" class="form-control" data-sly-test=${!properties.phoneno} placeholder="Phone number" />
  <input type="text" minLength="10" maxLength="11" data-ng-model="phoneNumber" data-ng-blur="phoneNumberValidation(phoneNumber)" name="phoneNumber" class="form-control" data-sly-test=${properties.phoneno} placeholder="${properties.phoneno}" />
  <span class="error_msg" data-ng-show="phoneNumberErrorShow">Please enter a valid phone number</span>
</div>

无法访问控制器中的ng-model值

3 个答案:

更新