angular学习笔记(四)- input元素的ng-model属性
input元素的ng-model属性:
用于将input的值和变量的值进行双向绑定
<!DOCTYPE html>
<html ng-app>
<head>
<title>2.3.1input数据绑定</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller = 'CheckStatus'>
<form action="">
<input type="checkbox" ng-model="checkRabbit"/>rabbit:<span>{{checkRabbit}}</span>
<br>
<input type="checkbox" ng-model="checkDog"/>dog:<span>{{checkDog}}</span>
<br>
<input type="checkbox" ng-model="checkCat"/>cat:<span>{{checkCat}}</span>
</form>
</div>
</body>
</html>
如果是text类型的input,绑定的就是它的value,如果是checkbox,绑定的就是选中状态的true或者false,
对input的绑定是双向的,即变量的变化,也会引起选中与否的变化(或者是value的变化),比如这里设置的checkRabbit值是true,那么它就是选中的,其余两个值设置的是false,他们就是不选中的,
同样,改变input的选中状态(或者是value值),它们绑定的变量也会被改变
angular学习笔记(四)- input元素的ng-model属性的更多相关文章
- angular学习笔记(三十一)-$location(2)
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- angular学习笔记(三十)-指令(7)-compile和link(2)
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...
- angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...
- angular学习笔记(三十)-指令(5)-link
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...
- angular学习笔记(三十)-指令(2)-restrice,replace,template
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...
- python3.4学习笔记(四) 3.x和2.x的区别,持续更新
python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...
- angular学习笔记(三十一)-$location(1)
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...
- angular学习笔记(三十)-指令(7)-compile和link(1)
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...
随机推荐
- posix_memalign详细解释(转)——自定义对齐大小的内存分配函数
转载:http://hi.baidu.com/freelonely/blog/item/340341077c4d287302088189.html 预对齐内存的分配 在大多数情况下,编译器和C库透明地 ...
- C#编写Windows服务程序 (服务端),client使用 消息队列 实现淘宝 订单全链路效果
需求: 针对 淘宝提出的 订单全链路 产品接入 .http://open.taobao.com/doc/detail.htm?id=102423&qq-pf-to=pcqq.group oms ...
- Unix 网络编程 读书笔记3
第四章 基本tcp 套接口编程 注意区分AF_XXX 和PF_XXX,AF代表address family, PF代表protocol family. 1 socket 函数 2 connect 函数 ...
- maven org.apache.tomcat.util.bcel.classfile.ClassFormatException: Invalid byte tag in constant pool: 60
maven org.apache.tomcat.util.bcel.classfile.ClassFormatException: Invalid byte tag in constant poo ...
- 〖Android〗OK6410a的Android HAL层代码编写笔记
一.编写LED灯的Linux驱动程序代码 之所以使用存在HAL层,是为了保护对硬件驱动过程的逻辑与原理: 所以,残留在Linux驱动层的代码,只保留了基本的读写操作,而不含有关键的逻辑思维: 1. l ...
- 关于NHibernate中存在于Session中实例的3种状态的简单分析
在使用NHibernate的时候.在Session中会有3种状态. 1. 瞬时状态 (Transient) 由 new 命令开辟内存空间的对象,也就是平时所熟悉的普通对象. 如: Student st ...
- HDU 3316 My Brute(二维费用流)经典
My Brute Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- 微信小程序独家秘笈之左滑删除
代码地址如下:http://www.demodashi.com/demo/14056.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序:input输入框和form表单几种传值和取值方式
1.传值:index下标传值.页面navigator传值 1.index下标 实现方式是:data-index="{{index}}"挖坑及e.currentTarget.data ...
- leetcode719:直线上的第k近点对
问题描述 给定数组a[N],可以确定C(N,2)个点对,也就确定了C(N,2)个距离,求这些距离中第k小的距离(k<C(N,2)). 思路 看到第k小.第k大这种问题,首先想到二分法. 把求值问 ...