CODEWITHSUNDEEP
javascriptangularjs
sparsh610
sparsh610

Reputation: 1601

Not able to call function present in controller

i am trying to call a function present in the controller on click of submit button

<div ng-app="" ng-controller="studentController">

    <table>
        <tr>
            <th>Name</th>
            <th>Roll No</th>
            <th>Percentage</th>
        </tr>

        <tr ng-repeat="student in students">
            <td>{{ student.Name }}</td>
            <td>{{ student.RollNo }}</td>
            <td>{{ student.Percentage }}</td>
        </tr>
    </table>
    <input type="text" ng-model=firstName /> <input type="text"
        ng-model=lastName /> <input type="number" ng-model=salary /> <input
        type="submit" onsubmit="saveEmployee()">
</div>
<script>
    function studentController($scope, $http) {

        $scope.saveEmployee = function() {
            $http({
                url : "studentData",
                method : "POST",
                params : {
                    firstName : "Sparsh",
                    lastName : "Khandelwal",
                    salary : 200000
                }
            }).success(function(response) {
                $scope.students = response;
            });
        }
    }
</script>

i thought it will send a server side request but instead of that it is not calling the function

Upvotes: 1

Views: 62

Answers (1)

Alex Johnson
Alex Johnson

Reputation: 1564

So, onsubmit isn't an Angular binding. It will try and reference a saveEmployee() function in your Javascript's global scope. You'll want to use ngSubmit which will reference the function in your Angular Controller's scope:

ngSubmit : Enables binding angular expressions to onsubmit events.

Link: Docs for ngSubmit

Upvotes: 4

Related Questions