Angularjs - variable not found

Question

have this issue with Angular.js that I can't seem to fix. Here is my simple html:

<html ng-app="myAngularapp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
    <script src="myangular.js"></script>
  </head>
  <body>
    <div ng-controller="myAngularCtrl">
<form ng-submit="addingName()">
        <input type="text" ng-model="myAngular.newname"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
</div>
  </body>
  </html>

and myangular.js:

angular.module("myAngularapp",[])
    .controller("myAngularCtrl", function($scope){
        $scope.myNames = [
            {name:"aaa"},
            {name:"aaa"},
            {name:"aaa"}
        ];

        $scope.addingName = function(){
            $scope.myNames.push({name:newname});
        }
    });

When I press the submit button, I got an error:

Error: Can't find variable: newname

What seems to be the problem?

Hi, what is myAngular. Do you mean it to represent your controller? — Abhilash Augustine
– Abhilash Augustine, Commented Oct 5, 2015 at 4:49

Ben Aubin · Accepted Answer · 2015-10-05 02:24:23Z

3

You never declared newname, instead it's a property on the $scope

<input type="text" ng-model="myAngular.newname"  size="30">

Can be accessed by $scope.myAngular.newname, not newname in your controller.

$scope.myNames.push({name: $scope.myAngular.newname});

This is because angular stores variables that can be accessed by the HTML in the $scope. This is an object that can be accessed inside a controller, making it unique.

answered Oct 5, 2015 at 2:24

Ben Aubin

5,7072 gold badges36 silver badges54 bronze badges

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

Comments

Jenson Raby · Accepted Answer · 2015-10-05 08:38:41Z

0

you can use

this.myAngular.newname

for getting value of text box after submitting the form

http://plnkr.co/edit/6P5LXuuTAfUfQS4RxmWG?p=preview

answered Oct 5, 2015 at 8:38

Jenson Raby

7892 gold badges6 silver badges27 bronze badges

1 Comment

Ben Aubin Over a year ago

Please put full code here, on Stack Overflow, with an explanation of why and how the code works. If you paste a link that stops working in the future, then your answer is lost, it's also super helpful to not have to go to a separate page. And, just spoon-feeding answers never helps anyone - you should explain how the code you gave fixes the the problem. Thanks!

Ben Aubin · Accepted Answer · 2015-10-26 13:16:02Z

0

In you html you are binding your input to a model called myAngular.newname But when you add this value to your array myNames you are using a variable newname.

You can either change variable name in your view or in your controller. This is up to you.

One option to fix your problem is:

<input type="text" ng-model="myAngular.newname"  size="30"
               placeholder="add new todo here">

edited Oct 26, 2015 at 13:16

Ben Aubin

5,7072 gold badges36 silver badges54 bronze badges

answered Oct 5, 2015 at 4:56

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

Comments

Ben Aubin · Accepted Answer · 2015-10-26 13:18:15Z

0

You can access myAngular.newname in the controller:

$scope.myAngular.newname

Or another option is to add an argument to addingName:

$scope.addingName = function(newname){//ur code};

Then change the HTML:

ng-submit="addingName(myAngular.newname)"

edited Oct 26, 2015 at 13:18

Ben Aubin

5,7072 gold badges36 silver badges54 bronze badges

answered Oct 5, 2015 at 4:40

hylimR

3934 silver badges10 bronze badges

Comments

Kulbhushan Singh · Accepted Answer · 2015-10-27 12:29:31Z

As a best practice: ViewModel should be very clearly defined.

Always use Controller As syntax and avoid $scope.

<form ng-submit="addingName()">
    <input type="text" ng-model="myAngular.newname"  size="30"
                   placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">
</form>

As you are using myAngular.newname, it should be declared on VM ($scope in your case). and pass the parameter of newname in the addingName function

So, your JS would be:

angular.module("myAngularapp",[])
    .controller("myAngularCtrl", function($scope){
        $scope.myNames = [
            {name:"aaa"},
            {name:"aaa"},
            {name:"aaa"}
        ];

        //or you may use without myAngular
        //$scope.newname = "";
        //in this case you will have to use: ng-model="newname"
        //                        instead of ng-model="myAngular.newname"
        $scope.myAngular = {
            newname: ""
        };

        $scope.addingName = addName;

        //you can use addName function even to add names from JS itself also
        function addName(name){
            $scope.myNames.push({name});
        }
    });

and view would be:

<form ng-submit="addingName(myAngular.newname)">
    <input type="text" ng-model="myAngular.newname"  size="30"
                   placeholder="add new todo here">
    <input class="btn-primary" type="submit" value="add">
</form>

PS: I can not add comments, so listed all the best practices as separate answer.

Collectives™ on Stack Overflow

Angularjs - variable not found

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related