双向数据绑定－表单

最新推荐文章于 2024-01-07 10:00:00 发布

ilvseyinfu

最新推荐文章于 2024-01-07 10:00:00 发布

阅读量320

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/qq_31751569/article/details/52403312

版权

AngularJs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html ng-app="UserInfoModule">
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> 
		<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
		<script src="Form.js"></script>
		<title>双向数据绑定</title>
	</head>
	<body>
		<div class="panel panel-primary">
			<div class="panel-heading">
				<div class="panel-title">双向数据绑定</div>
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-md-12">
						<form class="form-horizontal role="form" ng-controller="UserInfoCtrl">
							<div class="form-group">
								<label class="col-md-2 control-label">
									邮箱：
								</label>
								<div class="col-md-10">
									<input type="email" class="form-control" placeholder="推荐使用qq邮箱" ng-model="userInfo.email">
								</div>	
							<div>

							<div class="from-group">
								<label class="col-md-2 control-label">
									密码：
								</label>						
								<div class="col-md-10">
									<input type="password" class="form-control" placeholder="只能是数字密码或者下划线" ng-model="userInfo.password">
								</div>	
							</div>

							<div class="form-group">
								<div class="col-md-offset-2 col-md-10">
									<div class="checkbox">
										<label>
											<input type="checkbox" ng-model="userInfo.autoLogin">自动登录
										<label>	
									</div>	
								</div>	
							</div>	

							<div class="form-group">
								<div class="col-md-offset-2 col-md-10">
									<button class="btn btn-default" ng-click="getFormData()">获取表单的值
									</button>
									<button class="btn btn-default" ng-click="setFormData()">设置表单的值
									</button>
									<button class="btn btn-default" ng-click="restForm()">重置表单的值
									</button>
								</div>
							</div>	
						</form>
					</div>
				</div>
			</div>
		<div>	
	</body>
</html>

js代码：

<pre name="code" class="javascript">var userInfoModule = angular.module("UserInfoModule" , []);

userInfoModule.controller('UserInfoCtrl' , ['$scope' , function($scope){
	$scope.userInfo = {
		email:'1540086396@qq.com',
		password:'123',
		autoLogin:true

	};

	$scope.getFormData = function(){

		console.log($scope.userInfo);

	};

	$scope.setFormData = function(){

		$scope.userInfo={
			email:'ilvseyinfu@gmail.com',
			password:'1234',
			autoLogin:false
		};
	};

	$scope.restForm = function(){

	$scope.userInfo = {
		email:'1540086396@qq.com',
		password:'123',
		autoLogin:true

		};
	};



}]);