Question

我有两种形式（在一页中）。在第一个表格上有两个按钮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吗？

Answer 1

ng-if创建自己的范围。因此ng-if内的otp没有直接绑定到控制器。您可以将模型绑定到对象或使用控制器作为语法。 控制器语法隐含地处理点规则。

了解更多信息：

https://github.com/angular/angular.js/wiki/Understanding-Scopes
AngularJs "controller as" syntax - clarification?

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 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>

angularjs模型值在表单中是未定义的

2 个答案: