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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
Vue Echarts实现可视化世界地图代码实例
May 07 Javascript
jQuery实现计算器功能
Oct 19 jQuery
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
5.PHP的其他功能
2006/10/09 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
纯前端JavaScript实现Excel IO案例分享
2016/08/26 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
python基础教程之字典操作详解
2014/03/25 Python
python实现下载文件的三种方法
2017/02/09 Python
python生成带有表格的图片实例
2019/02/03 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
Python接口自动化系列之unittest结合ddt的使用教程详解
2021/02/23 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
求职简历的自我评价怎样写好
2013/10/07 职场文书
期末自我鉴定
2014/01/23 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
党员四风问题对照检查材料思想汇报
2014/09/16 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
员工工作自我评价
2014/09/26 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
校长新学期致辞
2015/07/30 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android
深入解析MySQL索引数据结构
2021/10/16 MySQL