ng-click instead of submit

Question

After I click submit in a form, some javascript runs to modify the data and sends it to whatever the form action is specified in the HTML:

// Submit the form:
    // $form.get(0).submit();
    $('.submit', $(event.target.form)).click();

I would like to instead use ng-click and send that info to an angular function, such as vm.checkout().

How can I make this happen?

Answer 1

Use ngSubmit directive instead of ngClick for form submit.It binds to the submit event which is fired when a form is submitted.

ng-submit works only when forms submitted. where as ng-click can work without form submit event.

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.submitMe = function () {
    alert('Submitted');
  };
});

<div ng-app="myApp" ng-controller="MyCtrl">
    <form ng-submit="submitMe()" name="myForm">
    <button type="submit">submit</button>
  </form>
</div>

Answer 2

JavaScript

$scope.submit = function(data){
     // do something with data
}

HTML

<form>
    <input type="text" ng-model="temp.name" name="name"/>
    <button type="button" ng-click="submit(temp)">Submit</button>
</form>

Answer 3

If it is a form you are submitting you should use ng-submit . Add the ng-submit tag with the corresponding function which will be in your controller. Then, you will be able to handle the data from your form submission.

For example:

<form ng-submit="submit()" ng-controller="ExampleController"></form>