CODEWITHSUNDEEP
javascripthtmlarraysangularjs
khoi
khoi

Reputation: 1180

Cannot read property 'push' of undefined. adding data to an array.

I'm just started learning AngularJS,I want to pass information from form then passing to controller and enter the information to an array but received this message "Cannot read property 'push' of undefined".I don't know with part did i do wrong.I hope you guys can help me solve this problem.Thank you in advance.

form.html

<!DOCTYPE html>
<html ng-app="formTraining">
  <head>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
    <script type="text/javascript" src="angular.min.js"></script>
    <script type="text/javascript" src="formapp.js"></script>
        <link rel="stylesheet" href="style.css" />
  </head>

  <body ng-controller="UserController as usersCtrl">

    <h3>User Information</h3>
    <div ng-repeat="user in usersCtrl.mUsers">
        <p><ul>
            <li>{{user.name}}</li>
            <li>{{user.age}}</li>
            <li>{{user.occupation}}</li>
        </ul></p>
    </div>

    <div ng-controller="FormController as formCtrl">

        <form name="form" ng-submit="form.$valid && formCtrl.addUser(user)">
            <h5>Submit a Review</h5>

            <fieldset class="form-group">
                <input type="text" ng-model="UserCtrl.newUser.name"  class="form-control" placeholder="write your name.." title="Name">
            </fieldset>

            <fieldset class="form-group">
                <input type="text" ng-model="UserCtrl.newUser.age" class="form-control" placeholder="write you actual age.." title="Age">
            </fieldset>

            <fieldset class="form-group">
                <input type="text" ng-model="UserCtrl.newUser.occupation"  class="form-control" placeholder="write your job.." title="occupation">
            </fieldset>

            <fieldset class="form-group">
                <input type="submit" class="btn btn-primary pull-right" value="submit form">
            </fieldset>
        </form>
    </div>

  </body>

</html>

formapp.js

(function(){


    var app = angular.module("formTraining",[]);



    app.controller('UserController',function(){

        this.mUsers = users;
    });

    app.controller('FormController',function(){
        this.newUser = {};

        this.addUser = function(user){
            user.push(this.newUser);
            this.newUser = {};
        };
    });


    var users = [{
        name:"michael",
        age:"27",
        occupation:"business"
    },{
        name:"john",
        age:"25",
        occupation:"police"
    }];

})();

Upvotes: 0

Views: 200

Answers (1)

Eat at Joes
Eat at Joes

Reputation: 5037

Don't you want users

    app.controller('FormController',function(){
        this.newUser = {};

        this.addUser = function(user){
            users.push(this.newUser);
                ^

            this.newUser = {};
        };
    });

Upvotes: 1

Related Questions