$scope variables are not working inside $scope function in AngularJS

Question

Scope variable returns undefined value when using inside same Scope function.

index.html

<body ng-app="starter" ng-controller="AppCtrl">
                <form ng-submit="submit()">
                        <span class="input-label">name</span>
                        <input type="text" name="name" ng-model="name">     
                        <input type="submit" name="submit" value="Submit">                    
                </form>
</body>

app.js

angular.module('starter', [])
.controller('AppCtrl', function($scope) {
    $scope.submit = function(){
        alert($scope.name+' scope variable');
            }});

output:

undefined scope variable

pass your ngModel as parameter in submit() of ngSubmit or initialize $scope.name inside controller — Anirudh Mangalvedhekar, Dec 15 '16 at 05:02
I tested your code , it works fine.http://jsfiddle.net/Lvc0u55v/13278/ — Ved, Dec 15 '16 at 05:08
as @Ved said everything is fine with your code.....but i cant see closing } for your function submit and there is an extra ) in your app.js. this may cause for your problem — Sa E Chowdary, Dec 15 '16 at 05:30
@AnirudhMangalvedhekar Thank you. Passing ngModel works, but initializing $scope.name isn't. — GKumar, Dec 15 '16 at 05:30
just for awareness..It is always better to use dot with models...There is a nice explanation provided http://stackoverflow.com/questions/18128323/if-you-are-not-using-a-dot-in-your-angularjs-models-you-are-doing-it-wrong — Anirudh Mangalvedhekar, Dec 15 '16 at 05:56

score 1 · Answer 1 · answered Dec 15 '16 at 05:14

Try this example :

index.php

<body ng-app="starter" ng-controller="AppCtrl">
            <form ng-submit="submit()">
                    <span class="input-label">name</span>
                    <input type="text" name="name" ng-model="start.name">     
                    <input type="submit" name="submit" value="Submit">                    
            </form>

app.js

angular.module('starter', [])
  .controller('AppCtrl', function($scope) {
     $scope.start= {};
     $scope.submit = function(){
       alert($scope.start.name+' scope variable');
        );

score 1 · Answer 2 · answered Dec 15 '16 at 06:46

1

$scope.name is coming undefined because it is a scope model declared in UI and no value is assigned to it yet. This is expected behavior. If you want some default values assign those from controller or use an ng-init.

answered Dec 15 '16 at 06:46

Jithu Rajan

452
3
14

score 0 · Answer 3 · answered Dec 15 '16 at 05:31

Try This...

html files ...

<html>
<head>
   <script src="js/angular.min.js"></script>
</head>

<body ng-app="starter" ng-controller="AppCtrl">
                <form ng-submit="submit()">
                        <span class="input-label">name</span>
                        <input type="text" name="name" ng-model="name">     
                        <input type="submit" name="submit" value="Submit">                    
                </form>
</body>
<script src="app.js"></script>
</body>
</html>

this is your js file

angular.module('starter', [])
.controller('AppCtrl', function($scope) {
    $scope.submit = function(){
        alert($scope.name+' scope variable');
    }
});

jitendra varshney · Answer 4 · 2016-12-15T06:35:18.747

just pass the modal value in ng-submit like this

1st way ->

  <form ng-submit="submit(name)">
      <span class="input-label">name</span>
      <input type="text" name="name" ng-model="name">     
      <input type="submit" name="submit" value="Submit">                    
   </form>

js file

   $scope.submit = function(value){
       alert(value+' scope variable');
   }});

2nd way ->

or you can do this

   <form ng-submit="submit()">
      <span class="input-label">name</span>
      <input type="text" name="name" ng-model="name">     
      <input type="submit" name="submit" value="Submit">                    
   </form>

js file

your code is fine just check parenthesis it is ok code

  $scope.submit = function(){
     alert($scope.name+' scope variable');
  };

use this working plunker

https://plnkr.co/edit/C7oZck4hpt5xHBKkVGku?p=preview

score -1 · Answer 5 · edited Dec 15 '16 at 05:31

-1

The code looks fine to me there must a syntax error in your controller braces are not completed

I have created a working plunker https://plnkr.co/edit/UGEa1uvS83cJHAcXxYMi?p=preview

angular.module('starter', [])
    .controller('AppCtrl', function($scope) {
        $scope.submit = function() {
            alert($scope.name+' scope variable');
        }
    });

edited Dec 15 '16 at 05:31

Yatrix

13,361
16
48
78

answered Dec 15 '16 at 05:19

Parshuram Kalvikatte

1,616
4
20
40

1

Include the relevant fix and any explanation here, don't just post a link. – Yatrix Dec 15 '16 at 05:20
down voter please tell the reason of down vote dont only just down vote – Parshuram Kalvikatte Dec 15 '16 at 05:26
Good answers should be readable and clearly explained. I fixed the format of your code, but you should highlight your change in some way. If it's the braces that changed, do something like `<---- forgot these` or **bold** them or something. – Yatrix Dec 15 '16 at 05:32
OP issue was initialization... What OP really wanted was to have some value showed when submit is clicked without entering any value in input element...So the expected answer would be either initialize the ngModel or pass as parameter to ngSubmit... – Anirudh Mangalvedhekar Dec 15 '16 at 05:47
What i have done is angular,there is no need of passing parameter in submit...you are using angular – Parshuram Kalvikatte Dec 15 '16 at 06:46
in your plunkr please try the following scenario without passing parameter or initializing... – Anirudh Mangalvedhekar Dec 15 '16 at 07:42
Which parameter i have not send any parameter – Parshuram Kalvikatte Dec 15 '16 at 09:22

score -1 · Answer 6 · answered Dec 15 '16 at 05:23

Please go through below code --

HTML -

 <body ng-app="starter" ng-controller="AppCtrl">
        <form>
                <span class="input-label">name</span>
                <input type="text" name="name" ng-model="name">     
                <input type="submit" name="submit" value="Submit" ng-click="submit();">                    
        </form>
 </body>

JS

<script>
    angular.module('starter', []).controller('AppCtrl', function($scope) {
    $scope.name='';
    $scope.submit = function(){
    alert($scope.name+' scope variable');
      };
    });
</script>

Hope it helps you !

$scope variables are not working inside $scope function in AngularJS

6 Answers6