<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="edge" />
<meta name="viewport"content="width=device-width,initial-scale=1" />
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap/css/bootstrap.min.css" />
<style>

</style>
</head>
<body>
<div class="container"style="padding:50px">
<div data-ng-app="myApp"data-ng-controller="myCtrl">
<p>姓名：<input type="text"data-ng-model="name" /></p>
<p>性别：<input type="radio"data-ng-model="sex" value="男" name="sex"/>男<input type="radio"data-ng-model="sex" value="女" name="sex"/>女</p>
<p>兴趣：<input type="checkbox"value="跑步" data-ng-model="interest1"/>跑步<input type="checkbox"value="羽毛球" data-ng-model="interest2"/>羽毛球<input type="checkbox"value="编程" data-ng-model="interest3"/>编程</p>
<br /><hr />
<fieldset>
<legend>{{name}}:个人信息如下：</legend>
<p>性别：{{sex}}</p>
<p>兴趣：{{interest1}}{{interest2}}{{interest3}}</p>
</fieldset>

</div>

</div>

<script src="jQuery/jquery-2.2.0.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
angular.module("myApp", []).controller("myCtrl", function ($scope) {

})
</script>
</body>
</html>

Angularjs 数据双向绑定的更多相关文章

  1. AngularJS数据双向绑定

    <body ng-app> <div ng-controller="myCtrl"> <input ng-model="abc" ...

  2. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  3. 数据双向绑定页面无反应（angularjs）

    问题引入 使用 angularjs进行过一段时间的开发后,基本上都会遇到一个这样的坑:页面进行了双向数据绑定,控制层的数据也已经改变了,但是视图层的数据却没有改变. 其实造成这个问题的原因大致分为以下 ...

  4. 我的angularjs源码学习之旅3——脏检测与数据双向绑定

    前言 为了后面描述方便,我们将保存模块的对象modules叫做模块缓存.我们跟踪的例子如下 <div ng-app="myApp" ng-controller='myCtrl ...

  5. Jquery实现数据双向绑定（赋值和取值），类似AngularJS

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  6. Angular数据双向绑定

    Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.Angul ...

  7. vuejs数据双向绑定原理（get & set)

    前端的数据双向绑定指的是view(视图)和model(数据)两者之间的关系:view层是页面上展示给用户看的信息,model层一般是指通过http请求从后台返回的数据.view到model的绑定都是通 ...

  8. 原生js实现数据双向绑定

    最近接触了vue,在谈到vue等等的mvvm框架之前,先了解什么是数据双向绑定以及如何利用原生JS实现数据双向绑定 单向数据绑定 指先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HT ...

  9. vue中数据双向绑定的实现原理

    vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...

随机推荐

  1. Springboot - 自定义错误页面

    Springboot 没找到页面或内部错误时,会访问默认错误页面.这节我们来自定义错误页面. 自定义错误页面 1.在resources 目录下面再建一个 resources 文件夹,里面建一个 err ...

  2. js- 引用和复制（传值和传址）

    js- 引用和复制(传值和传址) 好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西 先讲一下很基础的东西,看看js中几种数据类型分别传的什么引用:对象.数组.函数复制:数字 ...

  3. MongoDB windows基础配置及集群搭建

    由于公司业务的发展MSSQL已处于瓶颈.因为没钱买牛逼服务器只能靠软件来实现最大优化了.原来的系统架构如下图:

  4. 世界、国家、省、城市SQL

    共享一份 世界.国家.省.城市最全的SQL(mysql可直接使用),笔者是花了下载币下载的 下载SQL #  pid=0 获取所有国家 #  pid=99999999    获取中国的省.自治区.直辖 ...

  5. 一分钟学会Git操作流程

    今天整理下公司操作git 流程,尽量用最最简洁的方式整理出来,方便以后有新来的同事学习使用. 我整理的这个Git操作,基本上只需要一分钟,就可以轻松上手啦!!! 一. 拉取提交操作 1.拉取远程代码 ...

  6. springboot--数据库操作

    1.注意: 使用get,post提交时,使用form-data; 使用put提交方式,使用x-www-form-url-encoded,这是http的一种格式;

  7. OLEDB 参数化查询

    一般情况下,SQL查询是相对固定的,一条语句变化的可能只是条件值,比如之前要求查询二年级学生信息,而后面需要查询三年级的信息,这样的查询一般查询的列不变,后面的条件只有值在变化,针对这种查询可以使用参 ...

  8. css 条纹背景

    先介绍文章用到的二个知识点 background-size 属性 语法 background-size: length|percentage|cover|contain; css线性渐变 linear ...

  9. SelectedItems的用法讲解

    在做俄罗斯方块的时候写了下面一段代码: private void listView1_SelectedIndexChanged(object sender, EventArgs e)         ...

  10. IntelliJ IDEA搭建SpringBoot的小Demo

    首先简单介绍下Spring Boot,来自度娘百科:Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进 ...