您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍angular+bootstrap怎么实现双向数据绑定实例,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
效果图:
代码如下:
<!doctype html> <html ng-app="UserInfoModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" > <script src="js/angular-1.3.0.js"></script> </head> <body> <div> <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" class="form-control" placeholder="推荐使用126邮箱" ng-model="userInfo.email"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">密码:</label> <div class="col-md-10"> <input type="password" class="form-control" placeholder="只能是数字、字母、下划线" 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">自动登录 </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> </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>
以上是“angular+bootstrap怎么实现双向数据绑定实例”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。