您的位置：首页 > Web前端 > AngularJS

AangularJs表单基本用法例子

2016-05-12 17:05 639 查看

宝宝不说话，安静的发代码。。。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单基本用法例子</title>
<script src="angular.js"></script>
<script>
var app=angular.module("formBasicDemo",[]);
app.controller("fromBasicCtrl",function($scope){
$scope.formInitObj={
UserName:"",
NickName:""
};
$scope.form={};
//下拉框数据
$scope.form.LocationCityList=[
{text:"北京",value:"北京"},
{text:"广州",value:"广州"},
{text:"上海",value:"上海"}
];

//提交验证
$scope.PostForm=function(){
if($scope.form.UserName==""||$scope.form.UserName==undefined){
alert("用户名不能为空！");
return false;
}
console.log($scope.form);
//提交后清空表单数据
$scope.form=angular.copy($scope.formInitObj);
//下拉框数据,提交之后给下拉框重新赋值，不然会没有数据
$scope.form.LocationCityList=[
{text:"北京",value:"北京"},
{text:"广州",value:"广州"},
{text:"上海",value:"上海"}
];
}
});
</script>
</head>
<body ng-app="formBasicDemo" ng-controller="fromBasicCtrl">
<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.LoveAnimal" ng-checked="true" value="dog"/>狗
<input type="radio" ng-model="form.LoveAnimal" value="cat"/>猫
</li>
<li>
<label>居住的城市：</label>
<select ng-model="form.LocationCity" ng-options="obj.text as obj.value for obj in form.LocationCityList">
<option value="">请选择城市</option>
<option>上海</option>
<option>北京</option>
<option>广州</option>
</select>
</li>
<li>
<input type="submit" value="提交"/>
</li>
</ul>
<ul>
<li>{{form.UserName}}</li>
<li>{{form.NickName}}</li>
<li>{{form.Age}}</li>
<li>{{form.IsMarried}}</li>
<li>{{form.LoveAnimal}}</li>
<li>{{form.LocationCity}}</li>
</ul>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航