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 相关文章推荐
javascript正则表达式中的replace方法详解
Apr 20 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
Sep 05 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
javascript仿百度输入框提示自动下拉补全
Jan 07 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
深入理解jquery跨域请求方法
May 18 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
关于Vue中axios的封装实例详解
Oct 20 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类
2006/11/25 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
JavaScript日期工具类DateUtils定义与用法示例
2018/09/03 Javascript
Angular设置别名alias的方法
2018/11/08 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
JavaScript this绑定过程深入详解
2018/12/07 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[32:39]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第一场 11.04
2020/11/04 DOTA
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python将string转换到float的实例方法
2019/07/29 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
在Python中实现字典反转案例
2020/12/05 Python
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
期末学生评语大全
2014/04/24 职场文书
2014年冬季防火方案
2014/05/21 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
个人典型事迹材料
2014/12/30 职场文书
2015年银行工作总结范文
2015/04/01 职场文书
班主任开场白
2015/06/01 职场文书
纪律委员竞选稿
2015/11/19 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
分析Netty直接内存原理及应用
2021/06/14 Java/Android
Python读取和写入Excel数据
2022/04/20 Python