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面象对象设计
Apr 28 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
vue 调用 RESTful风格接口操作
Aug 11 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP基础知识介绍
2013/09/17 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
Jquery简单分页实现方法
2015/07/24 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
JavaScript反弹动画效果的实现代码
2017/07/13 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
python的迭代器与生成器实例详解
2014/07/16 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python用imghdr模块识别图片格式实例解析
2018/01/11 Python
Python装饰器原理与用法分析
2018/04/30 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
静心口服夜广告词
2014/03/20 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
入团申请书格式
2019/06/20 职场文书
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记