炫意html5
最早CSS3和HTML5移动技术网站之一

AngularJS 表单

AngularJS 表单

AngularJS 表单是输入控件的集合。

HTML 控件

以下 HTML input 元素被称为 HTML 控件:

  • input 元素
  • select 元素
  • button 元素
  • textarea 元素

HTML 表单

HTML 表单通常与 HTML 控件同时存在。

AngularJS 表单实例

<script>function ExampleController($scope) { $scope.master = {"firstName":"John","lastName":"Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); };</script>
<form novalidate="" class="ng-pristine ng-valid">First Name:
<input type="text" ng-model="user.firstName" class="ng-pristine ng-valid">
Last Name:
<input type="text" ng-model="user.lastName" class="ng-pristine ng-valid">
<button ng-click="reset()">RESET</button></form>
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}

应用程序代码

<div ng-app="" ng-controller="formController">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
function formController ($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
</script>


HTML 属性 novalidate 用于禁用浏览器的默认验证。

实例解析

AngularJS ng-model 指令用于绑定 input 元素到模型中。

模型对象 master 的值为 {“firstName” : “John”, “lastName” : “Doe”}。

模型函数 reset 设置了模型对象 user 等于 master。

炫意HTML5 » AngularJS 表单

CSS3教程HTML5教程