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

回答

相關問題