angularjs模型值在表单中未定义答案

【问题标题】：angularjs model value is undefined in formangularjs模型值在表单中未定义
【发布时间】：2017-08-03 08:57:54
【问题描述】：

我有两种形式（在一页中）。在第一个表单中，有两个按钮 NEXT 和 BACK。单击下一个时，我将在页面上呈现下一个表单。我在这种情况下使用 ng-if。

<form name="otpform" novalidate ng-if="renderotpform">
  <fieldset ng-disabled="otpdisable">
    <div class="middle-container steps fourth-step overflow-hidden" id="divotp">
      <input class="" type="text" name="otp" placeholder="{{ 'OTP' | translate }}" ng-model="otp" required >
      <input type="button" value="{{ 'BACK' | translate }}" class="brown-button" ng-click="gotoAck()">
      <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="checkotp()">
    </div>
  </fieldset>
</form>

下面是我的js代码。

 $scope.checkotp = function () {
                debugger;
                var otpvalue;
                $scope.otp = {};
                otpvalue = $scope.otp; //undefined
              }

当我尝试访问 otp 模型时，我得到了未定义的属性。在以前的表格中，我有下一个按钮。在下一个按钮里面我有$scope.renderotpform = true; 以便显示上面的表格。我可以知道为什么我无法在上面的代码中访问 OTP 吗？

【问题讨论】：

你为什么要这样做？ $scope.otp = {};它会将 otp 值分配给黑色对象。
谢谢。我删除了 $scope.otp={}，但我仍然不确定。
直到您在文本框中输入任何值，它才会被取消定义；
我输入了一些值。我有 checkotp() 函数。点击我正在检查值。希望你能理解。
然后请创建小提琴以查看整个代码，这一定是让 otp 变黑的东西

标签： javascript angularjs

【解决方案1】：

ng-if 创建自己的范围。所以ng-if里面的otp并没有直接绑定到控制器。你可以将模型绑定到一个对象或者使用controller as语法。 controller as 语法隐式处理点规则。

更多信息：

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  var vm=this;
  vm.renderotpform = true;
  vm.checkotp = function() {
    console.log(vm.otp);
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl as vm">
    <form name="otpform" novalidate ng-if="vm.renderotpform">
      <fieldset ng-disabled="otpdisable">
        <div class="middle-container steps fourth-step overflow-hidden" id="divotp">
          <input class="" type="text" name="otp"  ng-model="vm.otp" required>
          <input type="button" value="BACK" class="brown-button" ng-click="vm.gotoAck()">
          <input type="submit" value="NEXT" class="blue-button" ng-click="vm.checkotp()">
        </div>
      </fieldset>
    </form>
  </div>

【讨论】：

感谢“ng-if 创建自己的范围”。 :-)
您的回答也通过使用对象解决了问题。当我们使用对象时，绑定将直接发生在父范围内。
是的，我知道，但“ng-if 创建子范围”对我来说是新的。并且您很好地解释了为什么问题中的代码不起作用。

【解决方案2】：

从一个对象制作表单的所有 ng 模型。。

它会起作用，并且还有其他优点，例如您可以只使用一个对象轻松重置和发布数据。：-

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.formData = {};
  $scope.renderotpform = true;
  $scope.checkotp = function() {
    console.log($scope.formData.otp);
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">
    <form name="otpform" novalidate ng-if="renderotpform">
      <fieldset ng-disabled="otpdisable">
        <div class="middle-container steps fourth-step overflow-hidden" id="divotp">
          <input class="" type="text" name="otp"  ng-model="formData.otp" required>
          <input type="button" value="BACK" class="brown-button" ng-click="gotoAck()">
          <input type="submit" value="NEXT" class="blue-button" ng-click="checkotp()">
        </div>
      </fieldset>
    </form>
  </div>

【讨论】：