AngularJS ng-Submit Directive

AngularJS ng-Submit prevents the default form submition action if the form does not contain action or data-action attributes. It enables you to bind angular expressions on onsubmit event.

Syntax

<form ng-submit="yourFunction()">
</form>

AngularJS ng-Submit Directive Example

<html>  
<head>  
<title>My first AngularJS ng-submit Directive code</title>
 <!-- www.techstrikers.com -->
<Script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js">  
</script> 
<script> 
function CustomController($scope) {
  $scope.items = [
    {text:'www.techstrikers.com', done:true}];

  $scope.addList = function() {
    $scope.items.push({text:$scope.itemText, done:false});
    $scope.itemText = '';
  };

  $scope.remaining = function() {
    var count = 0;
    angular.forEach($scope.items, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  
}
</script> 
</head>  
<body> 
<div ng-app>
  <h2>ng-submit Example</h2>
  <div ng-controller="CustomController">
       <ul class="unstyled">
      <li ng-repeat="item in items">
        <p ng-model="item.done"/>
        <span class="done-{{item.done}}">{{item.text}}</span>
      </li>
    </ul>
    <form ng-submit="addList()">
      <input type="text" ng-model="itemText"  size="30"
             placeholder="add new item here">
      <input class="btn-primary" type="submit" value="add">
    </form>
  </div>
</div>
</body>  
</html>

See Live Example

« Previous

AngularJS Code Examples

AngularJS Live Demo

ASP.NET Code Examples

Javascript Code Examples

Interview Q & A

Google MAP API Live Demo

Google MAP API Code Examples

Utility Tools

Articles

Angularjs Tutorials

Angularjs References

Angularjs Examples

AngularJS ng-Submit Directive

AngularJS ng-Submit Directive Example

Recent Articles