AngularJS表单开发



上节课家庭作业回顾


在AngularJs中定义一个控制器,而这个控制器当中,是一个简单的表单。



AngularJs表单开发(基础应用)


1.简单的表单提交;


2.更多的表单元素;


3.初始化表单;


代码


<!doctype html>
<html ng-app="lesson" ng-controller="FormCtrl" >
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>
LESSON 7
  </title>
  <link rel="stylesheet" type="text/css" href="css/main.css" />
  <style>
  #content1{padding:16px;}
  </style>
 
  </head>
 
  <body>
  
<form ng-submit="PostForm()" >
<ul>
<li>
<label>用户名:</label><input type="text" ng-model="form.UserName" />
</li>
<li>
<label>昵称:</label><input type="text" ng-model="form.NickName" />
</li>
<li>
<label>年龄:</label><input type="text" ng-model="form.Age" />
</li>
<li>
<label>是否已婚:</label><input  type="checkbox" ng-model="form.IsMarried" />
</li>
<li>
<label>喜爱的动物:</label>
<input  type="radio" ng-model="form.LovedAnimal" value="狗" />狗
<input  type="radio" ng-model="form.LovedAnimal" value="猫" />猫
</li>
<li>
<label>居住的城市:</label>
<select ng-model="form.LocationCity"
ng-options=" obj.text as obj.value for obj in form.LocationCityList"
>
<option value="">请选择城市</option>
</select>
</li>
<li>
<input type="submit" value="提交" />
</li>
</ul>
</form>
  
<ul>
<li>{{form.UserName}}</li>
<li>{{form.NickName}}</li>
<li>{{form.Age}}</li>
<li>{{form.IsMarried}}</li>
<li>{{form.LovedAnimal}}</li>
<li>{{form.LocationCity}}</li>
</ul>
 
<script src="scripts/angular-1.4.6.min.js"></script>
<script>
var app = angular.module("lesson",[]);
app.controller("FormCtrl",function($scope){
 
$scope.formInitObj = {
UserName:"",
NickName:"",
};
$scope.form = {};
 
$scope.form.LocationCityList = [
{text:"北京",value:"北京"},
{text:"上海",value:"上海"},
{text:"广州",value:"广州"}
];
 
$scope.PostForm=function(){
console.log($scope.form);
$scope.form = angular.copy($scope.formInitObj);
}
 
});
 
 
</script>
 
  </body>
</html>


执行结果


5.png



小结


1.上节课家庭作业回顾——在AngularJs中定义一个控制器,而这个控制器当中,是一个简单的表单;


2.AngularJs表单开发(基础应用)。



作业


表单的验证,看看表单验证中的问题。



【本文由大发二分彩—大发三分彩官方独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 tvqo.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部