$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)
     };
 }
]);

$scope variable is defined in the controller section only, your browser console i not inside of your controller, so $scope is undefined in your browser console — Arash Khajelou
– Arash Khajelou, Commented Jul 25, 2017 at 9:11
site is too big, i just create a separate page and trying to getting problem solve. :( — Noman Kt
– Noman Kt, Commented Jul 25, 2017 at 9:12

voskhod · Accepted Answer · 2017-07-25 09:37:01Z

1

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.firstName and <input ng-model="user.firstName">.
use the "controllerAs" syntax.

Read more on this in documentation on controllers and scopes.

answered Jul 25, 2017 at 9:37

voskhod

19412 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Noman Kt Over a year ago

not working with $scope', '$http', 'ngCart','$localStorage', '$sessionStorage','$window'

Projesh Pal · Accepted Answer · 2017-07-25 10:54:27Z

0

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

edited Jul 25, 2017 at 10:54

answered Jul 25, 2017 at 10:03

Projesh Pal

4584 silver badges12 bronze badges

3 Comments

Noman Kt Over a year ago

i have tried all this methods, its will work, but its not working with this '$scope', '$http', 'ngCart','$localStorage', '$sessionStorage','$window'

Noman Kt Over a year ago

thanks for efforts, can you solve this issue with this $scope', '$http', 'ngCart','$localStorage', '$sessionStorage','$window' ?

Projesh Pal Over a year ago

modified the answer a bit...not aware of ngCart .. but have to add to app dependencies

himanshu · Accepted Answer · 2017-07-25 11:27:58Z

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.

Collectives™ on Stack Overflow

$scope.variable is undefined in browser console while form submit AngularJs

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related