AngularJS学习之表单

标签：mod   reset   ctr   date   设置   textarea   put   对象   html5   

1.HTML控件：以下HTML input元素被称为HTML控件：

**input元素

**select元素

**button元素

**textarea元素

2.AngularJS表单实例：

<div ng-app="myApp" ng-controller="formCtrl">

　　<form novalidate>      //novalidate属性是在HTML5中新增的，禁用了使用浏览器的默认验证

     First Name:<br>

　　<input type="text" ng-model="user.firstName"></br>          //ng-model指令绑定了两个input元素到模型的user对象

　　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>

var app=angular.module(‘myApp‘,[]);

app.controller(‘formCtrl‘,function($scope){                //formCtrl函数设置了master对象的初始值，并定义了reset()方法

　　$scope.master={firstName:"John",lastName:"Doe"}

　　$scope.reset=function(){                                     //reset()方法设置了user对象等于master对象

　　　　$scope.user=angular.copy($scope.master)

　　};

　　$scope.reset();

});

</script>

AngularJS学习之表单

标签：mod   reset   ctr   date   设置   textarea   put   对象   html5   

原文地址：http://www.cnblogs.com/hqutcy/p/6100294.html