AngularJs——双向数据绑定示例

发布时间：2020-12-17 09:46:07 所属栏目：安全来源：网络整理

导读：我们在页面中加入一个表单： span style="font-size:10px;"!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"/sc

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

<span style="font-size:10px;"><!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>  
</span>

之后，定义模块跟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",autoLogin:true 
        };  
    };  
}]);

代码解析：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!