Description :
Ng-Submit-1
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="ExampleController">
<div class="container">
<b>Name List</b>
<ul class="unstyled">
<li ng-repeat="todo in arrs">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form ng-submit="addRecords()">
<input type="text" ng-model="name" class="form-control" placeholder="add name here"><br />
<input class="btn btn-primary" type="submit" value="add">
</form>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.arrs = [{ text: "John", done: false }, { text: "Kim", done: false }];
$scope.addRecords = function () {
$scope.arrs.push({ text: $scope.name, done: false });
$scope.name = "";
}
}]);
</script>
</body>
</html>
Description :
Ng-Submit-2
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="ExampleController">
<div class="container">
<form name="emailForm" ng-submit="addMail()">
<label>
Email:
<input type="email" ng-model="email" class="form-control" placeholder="Email"><br />
<input ng-disabled="emailForm.$invalid" class="btn btn-primary" type="submit" value="Submit">
</label>
<pre>{{showMail}}</pre>
</form>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.addMail = function () {
$scope.showMail = $scope.email;
$scope.email = "";
}
}]);
</script>
</body>
</html>
Description :
Ng-Submit-3
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.error {
color: maroon;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="ExampleController">
<div class="container">
<h3>Registration form.</h3>
<form name="frmRegister" ng-submit="register();" novalidate>
<div>
First Name: <input name="first_name" class="form-control" type="text" ng-model="firstName" required />
<span class="error" ng-show="frmRegister.first_name.$dirty && frmRegister.first_name.$error.required">First Name is required</span>
</div>
<div>
Last Name: <input name="last_name" class="form-control" type="text" ng-model="lastName" required />
<span class="error" ng-show="frmRegister.last_name.$dirty && frmRegister.last_name.$error.required">Last Name is required</span>
</div>
<div>
Email: <input name="email" class="form-control" type="email" ng-model="email" required />
<span class="error" ng-show="frmRegister.email.$dirty && frmRegister.email.$error.required">Email is required.</span>
<span class="error" ng-show="frmRegister.email.$dirty && frmRegister.email.$error.email">Invalid Email address.</span>
</div><br />
<input type="submit" value="Save" class="btn btn-default" ng-disabled="frmRegister.$invalid" />
<span ng-show="registered"><br />YOU ARE SUCCESSFULLY REGISTERED.</span>
</form>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.register = function () {
$scope.registered = true;
}
}]);
</script>
</body>
</html>
Description :
Ng-Submit-4
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="ExampleController">
<div class="container">
<h3>Registration form.</h3>
<form name="editForm" ng-submit="save(this)" novalidate>
<div class="form-group">
<label for="name">Your Email </label>
<input type="email" name="email" data-ng-model="email" class="form-control" required />
<span>{{errorMsg}}</span>
</div>
<input type="submit" class="btn btn-default" value="Submit">
</form>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.save = function ($this) {
if ($this.editForm.email.$error.required) {
$scope.errorMsg = "This field is required";
}
else if ($this.editForm.$invalid) {
$scope.errorMsg = "Email is not valid";
}
else {
$scope.errorMsg = "";
alert("Form is valid.");
}
}
}]);
</script>
</body>
</html>
Description :
Ng-Submit-5
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.ng-invalid {
border: 1px solid red;
}
</style>
</head>
<body ng-app="app">
<div ng-controller="ExampleController">
<div class="container">
<h3>Form</h3>
<form style="border:none" name="register" ng-submit="save(this)" novalidate ng-class="{true:'submitted'}[submitted]">
<label>Name: <input type="text" class="form-control" ng-model="user.username" required></label> <br />
<label>Email: <input type="email" class="form-control" ng-model="user.email"></label><br />
<input class="btn btn-default" type="submit">
</form>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.save = function ($this) {
if ($this.register.$invalid)
alert("Form is not valid!");
else
return;
};
}]);
</script>
</body>
</html>
Description :
Ng-Submit-6
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="ExampleController">
<div class="container">
<h3>Form</h3>
<form name="editForm" ng-submit="insert()">
<input type="text" ng-model="pushObj" class="form-control" required><br />
<input class="btn btn-default" type="submit" ng-disabled="editForm.$invalid" value="insert">
</form>
<br />
<form ng-submit="retrieve()">
<input class="btn btn-primary" type="submit" value="retrieve">
</form><br />
<pre>
output : <b>{{Arr3}}</b><br>
stack 1 (from newest to oldest): <b>{{Arr1}}</b><br>
stack 2 (from oldest to newest): <b>{{Arr2}}</b></pre>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.Arr1 = [];
$scope.Arr2 = [];
$scope.Arr3 = [];
var count = 0;
$scope.insert = function () {
$scope.Arr1.length == 0 ? $scope.Arr1.push($scope.pushObj) : $scope.Arr2.push($scope.pushObj);
$scope.pushObj = "";
};
$scope.retrieve = function () {
if ($scope.Arr1.length != 0 || $scope.Arr2.length != 0) {
count == 0 ? arr3 = $scope.Arr1.splice(0, 1) : arr3 = $scope.Arr2.splice($scope.Arr2.length - count, 1);
$scope.Arr3.push(arr3[0]);
count++;
};
};
}]);
</script>
</body>
</html>
Description :
Ng-Submit-7
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="ExampleController">
<div class="container">
<h3>Add Rows</h3>
<form ng-submit="save()">
<div ng-repeat="row in list">
<input type="text" class="form-control" ng-model="row.text" />
</div><br />
<input type="button" class="btn btn-primary" ng-click="list.push({})" value="Add Row" /><button class="btn btn-default">Submit</button>
</form>
<br>
<pre ng-show="isShow">list={{savedData}}</pre>
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.list = [{ text: "LearnIt" }];
$scope.save = function () {
$scope.isShow = true;
$scope.savedData = angular.copy($scope.list);
};
}]);
</script>
</body>
</html>
Description :
Ng-Submit-8
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="ExampleController">
<div class="container">
<h3>Login</h3>
<form name="editForm" ng-submit="login()" ng-hide="isShow">
User Name: <input type="text" ng-model="records.userName" required class="form-control" />
Password: <input type="password" ng-model="records.password" required class="form-control" /><br />
<button class="btn btn-primary" ng-disabled="editForm.$invalid">Login</button>
</form>
<br>
<pre ng-show="isShow"><h4>Welcome <b>{{name}}</b> You are successfully login</h4></pre>
<input ng-show="isShow" class="btn btn-default" type="button" value="Logout" ng-click="isShow=false" />
</div>
</div>
<script>
var app = angular.module("app", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.records = {
userName: "",
password: ""
};
$scope.login = function () {
$scope.isShow = true;
$scope.name = $scope.records.userName;
$scope.records = {
userName: "",
password: ""
}
};
}]);
</script>
</body>
</html>