angularjs模型值在表单中是undefined

我有两种形式（在一个页面中）。第一种形式有两个按钮NEXT和BACK。点击下一页我将在页面上渲染下一个表单。我正在使用ng-if来处理这种情况。angularjs模型值在表单中是undefined

<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吗？

来源

2017-08-03 Niranjan Godbole

你为什么要这么做？ $ scope.otp = {};它会将otp值分配给黑色对象。 – Jenny

谢谢。我删除了$ scope.otp = {}，但我仍然未定义。 –

它将被取消定义，直到你输入任何值到文本框; – Jenny

ng-if创建自己的范围。因此，ng-if中的otp不会直接绑定到控制器。您可以将模型绑定到对象，也可以使用控制器作为语法。作为句法的控制器隐式地处理点规则。

欲了解更多信息：

https://github.com/angular/angular.js/wiki/Understanding-Scopes

AngularJs "controller as" syntax - clarification?

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>

来源

2017-08-03 09:44:15 Vivz

。 :-) –

您的回答也可以通过使用对象来解决问题。当我们使用对象时，绑定将直接发生到父范围。 – Vivz

是的，我知道，但“ng-if创建子范围”对我来说是新的。你为什么在问题中的代码无法正常工作。 –

从一个对象中创建表单的所有ng模型。。

它的工作还有其他的优势，为像你这样很容易复位和后数据只有一个object.:-

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>

来源

2017-08-03 09:29:40

angularjs模型值在表单中是undefined

回答

相关问题