Wednesday, March 4, 2015

ng-submit directive

Using the ng-submit directive we can make Ajax calls to the methods in the controller when the form is submitted. The conventional form tag and action method will post the page data and re-direct to a new page, the ng-form directive instead allows us to call a JavaScript method in the controller and pass objects to the controller method.

The following example shows a simple implementation of the form submit, in this example we just display a message from the submit function, in real time we can do complex implementations like making Ajax calls to the Server.

<html ng-app>
    <meta charset="utf-8">
    <title>AngularJS - Basic</title>
    <script src="angular.min.js"></script>
      function nameController($scope){
 $scope.person = {
firstName: "John",
lastName: "David",
$scope.SaveForm = function(person) {
alert('Form Submitted, Full Name: ' + person.firstName + ', ' + person.lastName);
<div ng-controller="nameController">
<form name="nameForm" ng-submit="SaveForm(person)" novalidate>
First Name: <input type="text" ng-model="person.firstName"><br/><br/>
Last Name: <input type="text" ng-model="person.lastName"><br/><br/>
<button type="submit">Submit</button>


Search Flipkart Products:

No comments: