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


Posted in Javascript onMarch 03, 2017

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
jqPlot Option配置对象详解
Jul 25 Javascript
一个js写的日历(代码部分网摘)
Sep 20 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
一个支持任意尺寸的图片上下左右滑动效果
Aug 24 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 #Javascript
js实现二级导航功能
Mar 03 #Javascript
js实现简单的获取验证码按钮效果
Mar 03 #Javascript
jQuery获取Table某列的值(推荐)
Mar 03 #Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 #Javascript
js正则表达式验证密码强度【推荐】
Mar 03 #Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 #Javascript
You might like
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
2011/07/08 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
Javascript学习笔记之相等符号与严格相等符号
2014/11/23 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
微信小程序实现获取准确的腾讯定位地址功能示例
2019/03/27 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
原生js实现点击按钮复制内容到剪切板
2020/11/19 Javascript
python检测服务器是否正常
2014/02/16 Python
Python中shape计算矩阵的方法示例
2017/04/21 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
Sneaker Studio乌克兰:购买运动鞋
2018/03/26 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
数控个人求职信范文
2014/02/03 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
爱国主义教育演讲稿
2014/08/26 职场文书
工作年限证明模板
2014/11/01 职场文书
2014年医院工作总结
2014/11/20 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
2016新年致辞
2015/08/01 职场文书
公司档案管理制度
2015/08/05 职场文书