AngularJS 表单
1、AngularJS表单是输入控件的集合。
2、HTML控件，以下Html元素被称为HTML控件：input元素，select元素，button元素，textarea元素。
3、HTML表单通常与THML控件同时存在。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1" />
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.6-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container"style="padding:50px">
<div data-ng-app="myApp"data-ng-controller="myCtrl">
<form novalidate>
名：<input type="text"data-ng-model="user.firstName" />
<br />
姓：<input type="text"data-ng-model="user.lastName" />
<br />
<button type="button"data-ng-click="reset()">Reset</button>
</form>
<p>fullName:{{fullName()}}</p>
<p>user:{{user}}</p>
<p>master:{{master}}</p>
</div>
</div>
<script src="jQuery/jquery-2.1.4.min.js"></script>
<script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("myCtrl", function ($scope) { $scope.master = { firstName: "Johe", lastName: "Don" }; $scope.fullName = function () { return $scope.user.firstName+" "+$scope.user.lastName }; $scope.reset = function () { $scope.user = angular.copy($scope.master) };$scope.reset() })
</script>
</body>
</html>
实例解析
ng-app 指令定义了 AngularJS 应用。
ng-controller 指令定义了应用控制器。
ng-model 指令绑定了两个 input 元素到模型的 user 对象。
formCtrl 函数设置了 master 对象的初始值，并定义了 reset() 方法。
reset() 方法设置了 user 对象等于 master 对象。
ng-click 指令调用了 reset() 方法，且在点击按钮时调用。
novalidate 属性在应用中不是必须的，但是你需要在 AngularJS 表单中使用，用于重写标准的 HTML5 验证。
