angular+bootstrap的双向数据绑定实例

angular+bootstrap的双向数据绑定实例

代码如下:

<!doctype html> <html ng-app="UserInfoModule"> <head> <meta charset="utf-8"> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" > <script src="https://www.jb51.net/js/angular-1.3.0.js"></script> </head> <body> <div> <div> <div> <div> 双向数据绑定 </div> </div> <div> <div> <div> <form role="form" ng-controller="UserInfoCtrl"> <div> <label>邮箱:</label> <div> <input type="email" placeholder="推荐使用126邮箱" ng-model="userInfo.email"> </div> </div> <div> <label>密码:</label> <div> <input type="password" placeholder="只能是数字、字母、下划线" ng-model="userInfo.password"> </div> </div> <div> <div> <div> <label> <input type="checkbox" ng-model="userInfo.autoLogin">自动登录 </label> </div> </div> </div> <div> <div> <button ng-click="getFormData()"> 登录 </button> </div> </div> </form> </div> </div> </div> </div> </div> </body> <script> var UserInfoModule = angular.module('UserInfoModule',[]); UserInfoModule.controller('UserInfoCtrl',['$scope',function($scope){ $scope.userInfo={ email:'1101867009@qq.com', password:'xu201133016', autoLogin:true }; $scope.getFormData=function(){ $scope.userInfo={ email:'1101867009@qq.com', password:'xu201133016', autoLogin:true }; }; $scope.setFormData=function(){ $scope.userInfo={ email:'xu13071061935@163.com', password:'xu201133016', autoLogin:false } }; }]) </script> </html>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwzwzs.html