Simple form using AngularJS
Form is a collection of controls for the purpose of grouping related controls together.
Form and controls provide validation services, so that the user can be notified of invalid input. This provides a better user experience, because the user gets instant feedback on how to correct the error. Keep in mind that while client-side validation plays an important role in providing good user experience, it can easily be circumvented and thus can not be trusted. Server-side validation is still necessary for a secure application.
The key directive in understanding two-way data-binding is ngModel. The ngModel directive provides the two-way data-binding by synchronizing the model to the view, as well as view to the model.
index.html
<!doctype html>
<html ng-app>
<head>
<script src="http://code.angularjs.org/1.0.4angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<form novalidate class="simple-form">
Name:<input type="text" ng-model="user.name" /><br />
E-Mail: <input type="email" ng-model="user.email" /><br />
Gender <input type="radio" ng-model="user.gender" value="male" / >Male
<input type="radion" ng-model="user.gender" value="female" />Female<br />
<button ng-click="reset()">Reset</button>
<button ng-click="update(user)">Save</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
</body>
</html>
script.js
function controller($scope) {
$scope.master = {}'
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
