AngularJs——双向数据绑定示例

来源：互联网发布：易众联读卡器软件编辑：程序博客网时间：2024/04/30 19:36

最近在做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操作少了，数据双向绑定后，页面上表单改变值，也不用再重新取值，非常方便。

0 0