AngularJS push not working

Question

My angularJS push option is not working. Could someone please tell me where I'm going wrong and a fix for it, please? I started learning this language only for a week now. Please excuse me if the error/mistake is silly.

Thank you

    <body ng-app="app" ng-controller ="Ctrl"  >

    <style>
        .alert{

            color: crimson;
            font-size: 19px;

        }
        .form{ 

            width: 72%;
            margin-left: 12%;
            border: 2px solid gold;
        }

    </style>

    <script>
                var app = angular.module("app", []);
                app.controller("Ctrl", function ($scope) {
                    $scope.main = [{"ngmail": "[email protected]", "pass": "thor", "cpass": "thor"}];

                    $scope.add = function ($scope) {
                        $scope.main.push($scope.sf);

                    };

                });
    </script>




    <div>    
        <div>    
            <form name="regform" class="form-horizontal" role="form" style=" margin: auto;" >
                <div class="form-group">
                    <label class="control-label  col-sm-2" for="email3">Email:</label>
                    <div class="col-sm-4">

                        <input type="email" class="form-control" placeholder="Enter email" id="email3" name="email" ng-model="sf.ngmail" required/>
                        <span class ="alert" ng-show=" regform.email.$touched && regform.email.$error.required"> Required</span>
                        <span class ="alert" ng-show=" !regform.email.$error.required && (regform.email.$touched && regform.email.$invalid)"> Invalid Email</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="pwd3">Password:</label>
                    <div class="col-sm-4">          
                        <input type="password" class="form-control" id="pwd3" placeholder="Enter password" ng-model="sf.pass" name="password" required/>
                        <span class ="alert" ng-show=" regform.password.$touched && regform.password.$error.required"> Required</span>

                    </div> 
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-2" for="pwd4">Confirm password:</label>
                    <div class="col-sm-4">          
                        <input type="password" class="form-control" id="pwd3" placeholder="Enter password" ng-model="sf.cpass" name="cpassword" required/>
                        <span class ="alert" ng-show=" regform.cpassword.$touched && regform.cpassword.$error.required"> Required</span>

                    </div>
                </div>

                <div class="form-group">        
                    <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                            <label><input type="checkbox"> Remember me</label>
                        </div>
                    </div>
                </div>
                <div class="form-group">        
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" ng-click="add()" class="btn btn-default">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>    
    <br>   

    <div>

        <table border="1">
            <thead>
                <tr>
                    <th>Email</th>
                    <th>password</th>
                </tr>
            </thead>

            <tbody >
                <tr ng-repeat="m in main">

                    <td>{{m.ngmail}}</td>
                    <td>{{m.pass}}</td>
                </tr>
            </tbody>
        </table>


    </div>





</body>

scniro · Accepted Answer · 2015-07-18 02:15:01Z

3

As you are using $scope in function parameter, which is killing the existence of $scope dependency of controller & created a new variable with name $scope. You shouldn't need to add $scope inside your function, it would be already available inside your function.

Code

$scope.add = function () {
    $scope.main.push($scope.sf);
};

edited Jul 18, 2015 at 2:15

scniro

17k8 gold badges67 silver badges108 bronze badges

answered Jul 12, 2015 at 9:30

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Anik Islam Abhi · Accepted Answer · 2015-07-12 09:32:20Z

2

You don't need to pass $scope in function .

Try like this

$scope.add = function () {
    $scope.main.push($scope.sf);
};

answered Jul 12, 2015 at 9:32

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

1 Comment

Pankaj Parkar Over a year ago

i beated you by 1 min

user46772 · Accepted Answer · 2015-07-12 09:41:07Z

1

have you tried push method without passing the scope to the function

$scope.add= function(){ // no scope here
      $scope.main.push($scope.sf);
 };

answered Jul 12, 2015 at 9:41

user46772

2511 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS push not working

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related