效果如上图.代码如下
<!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <meta charset="UTF-8" /> <link rel="stylesheet" href="../bootstrap/css/bootstrap.css" /> <script type="text/javascript" src="bower-angular-master/angular.js"></script> <script type="text/javascript" src="userinfomodule.js"></script> <title>Document</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" ng-model="userInfo.email" class="form-control" placeholder="推荐使用126邮箱" /> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">密码</label> <div class="col-md-10"> <input type="password" ng-model="userInfo.password" class="form-control" placeholder="只能是数字、字母、下划线" /> </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="resetFormData()">重置表单值</button></div> </div> </form> </div> </div> </div> </div> </body> </html>
JS代码如下
var userInfoModule = angular.module(‘app‘, []);
userInfoModule.controller(‘UserInfoCtrl‘, [‘$scope‘, function($scope){
$scope.userInfo = {
email: ‘umgsai@126.com‘,
password: "123456",
autoLogin: true
};
//$scope.user = "test";
$scope.getFormData = function(){
console.log($scope.userInfo);
};
$scope.setFormData = function(){
$scope.userInfo = {
email: "umgsai@163.com",
password: "123456789",
autoLogin: false
}
};
$scope.resetFormData = function(){
$scope.userInfo = {
email: ‘umgsai@126.com‘,
password: "123456",
autoLogin: true
};
};
}])本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1690103
原文：http://shamrock.blog.51cto.com/2079212/1690103