$scope.variable is undefined in browser console while form submit AngularJs
Question
I want $scope.variable value in browser console but its always occur undefined.
form.htm
<form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName"
required /></p>
<button ng-click="SendData()">Submit</button>
</form>
myctr.js
app.controller('myCtrl', ['$scope', '$http', 'ngCart', '$localStorage',
'$sessionStorage', '$window',
function($scope, $http, ngCart, $localStorage,
$sessionStorage, $window) {
$scope.SendData = function() {
console.log($scope.firstName)
$window.alert($scope.firstName)
};
}
]);
3 answers
solution1
1 2017-07-25 09:37:01
Possible problem is that you're using a simple string value $scope.firstName . If your input is more than one scope "deeper" in the DOM hierarchy, then your $scope.firstName and ng-model in the input become two independent variables so no wonder that you get $scope.firstName undefined. That's the typical problem with simple types and scopes inheritance. Possible ways to solve this would be:
- use object to bind data between the controller and template:
$ctrl.user.firstNameand<input ng-model="user.firstName">. - use the "controllerAs" syntax.
Read more on this in documentation on controllers and scopes .
solution2
0 2017-07-25 10:03:14
use the following modified code ---
var app = angular.module('myApp', ['ngStorage']); app.controller('myCtrl', function($scope, $window,$http,$localStorage,$sessionStorage) { $scope.SendData = function() { console.log($scope.firstName) $window.alert($scope.firstName) }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <form> <p>First Name: <input type="text" name="firstName" ng-model="firstName" required /></p> <button ng-click="SendData()">Submit</button> </form> </div>
Modified the answer...
solution3
0 2017-07-25 11:27:58
As per the definition of ngModel it will try to bind to the property given by evaluating the expression on the current scope. If the property doesn't already exist on this scope, it will be created implicitly and added to the scope.
Here when submit is clicked without filling the text box $scope.firstName is undefined because firstName it is not defined in the current $scope.
If something is typed in the text box , as per the definition of ng-model a firstName property will be created implicitly and added to the scope.
Let controller be
app.controller('MainCtrl', function($scope) {
$scope.lastName='';
$scope.SendData = function() {
console.log($scope.firstName)
alert($scope.firstName)
};
$scope.CheckLast = function() {
console.log($scope.lastName)
alert($scope.lastName)
};
});
HTML
<body ng-controller="MainCtrl">
<form>
<p>First Name: <input type="text" name="firstName" ng-model="firstName"/></p>
<button ng-click="SendData()">Submit</button>
<p>Last Name: <input type="text" name="lastName" ng-model="lastName"/></p>
<button ng-click="CheckLast()">Submit</button>
</form>
</body>
Here Demo plunker you can see firstName is undefined while lastName is not as last name is initialised within the scope. and if something will be filled to firstName text box before submit the it is defined.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.