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

AngularJs——双向数据绑定示例

2016-12-11 00:00 519 查看

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

<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",
password:"1112345",
autoLogin:true
};
};
}]);

代码解析：

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

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

标签： AngularJS

相关文章推荐

新的分享

章节导航