AngularJs——双向数据绑定示例-阿里云开发者社区

AngularJs——双向数据绑定示例

2016-02-21 956

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 最近在做Hybird App,接触到了AngularJs,感觉用起来蛮爽的，今天share下AngularJs的核心功能之一：双向数据绑定。我们在页面中加入一个表单： Two...

+关注继续查看

最近在做Hybird App,接触到了AngularJs,感觉用起来蛮爽的，今天share下AngularJs的核心功能之一：双向数据绑定。

我们在页面中加入一个表单：

<!DOCTYPE html>
<html ng-app="userInfoModule">
<head>
<meta name="content-type" content="text/html; charset=UTF-8">
<script src="angular-1.5.0/angular.min.js"></script>
<script src="js/Forms.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script>

</script>
</head>

<body>
 <div class="panel panel-primary">
   <div class="panel-heading">
     <div class="panel-title">
       Two-way Binding demo
     </div>
   </div>
   <div class="panle-body">
       <div class="row">
         <div class="col-md-12">
           <form  class="form-horizontal" role="form" ng-controller="userInfoControl">
             <div class="form-group">
               <label class="col-md-2 control-label">
                 email-address:
               </label>
               <div class="col-md-10">
                 <input type="email" class="form-control" placeholder="please input you email-address" ng-model="userInfo.email">
               </div>
             </div>
             <div class="from-group">
               <label  class="col-md-2 control-label">
                 password:
               </label>
               <div class="col-md-10">
                 <input type="password" class="form-control" placeholder="please input your password" 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">login auto
                   </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()">
                   get form data
                 </button>
                 <button class="btn btn-default" ng-click="setFormData()">
                   set form data
                 </button>
                  <button class="btn btn-default" ng-click="resetFormData()">
                   reset form data
                 </button>
               </div>
             </div>
           </form>
         </div>
       </div>
   </div>
</div>
</body>
</html>

之后，定义模块跟controller,并在controller中绑定我们的model跟事件。

var userInfoModule=angular.module('userInfoModule',[]); /*定义模块*/
userInfoModule.controller('userInfoControl',['$scope',function($scope){/*定义Controller，并注入对象*/
	$scope.userInfo={ /*初始化数据*/
		email:"liuhuichao1128@163.com",
		password:"1112345",
		autoLogin:true
	};
	$scope.getFormData=function(){ /*获取模型数据*/
		console.log($scope.userInfo);
	};
	$scope.setFormData=function(){/*设置数据*/
		$scope.userInfo={
			email:"2523579001@163.com",
			password:"000000000000",
			autoLogin:true
		};
	};
	$scope.resetFormData=function(){/*重置数据*/
		$scope.userInfo={
			email:"liuhuichao1128@163.com",
			password:"1112345",
			autoLogin:true
		};
	};
}]);

代码解析：

用完之后，最大的感觉就是，DOM操作少了，数据双向绑定后，页面上表单改变值，也不用再重新取值，非常方便。