CODEWITHSUNDEEP
javascripthtmlangularjs
sooon
sooon

Reputation: 4878

Angularjs - variable not found

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?

Upvotes: 0

Views: 477

Answers (5)

Kulbhushan Singh
Kulbhushan Singh

Reputation: 536

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.

Upvotes: 0

hylimR
hylimR

Reputation: 393

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)"

Upvotes: 0

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

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

Upvotes: 0

Jenson Raby
Jenson Raby

Reputation: 789

you can use 

this.myAngular.newname

for getting value of text box after submitting the form

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

Upvotes: 0

Ben Aubin
Ben Aubin

Reputation: 5657

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.

Upvotes: 3

Related Questions