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属性的更多相关文章

  1. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  2. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  3. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  4. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  5. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  6. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  7. python3.4学习笔记(四) 3.x和2.x的区别，持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  8. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  9. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

随机推荐

  1. 1z0-052 q209_7

    7: In which of the scenarios will the DBA perform recovery? (Choose all that apply.) A.The alert log ...

  2. &quot;高可用方案工具包&quot; high availability toolkit 1.2 公布了。version 1.2 新增了 负载均衡 load balance 的技术实现

    "高可用方案工具包"  high availability toolkit 1.2 公布了. version 1.2 新增了 负载均衡 load balance 的技术实现. 项目 ...

  3. PLY格式介绍

    PLY是一种电脑档案格式,全名为多边形档案(Polygon File Format)或 斯坦福三角形档案(Stanford Triangle Format).  史丹佛大学的 The Digital ...

  4. Linux 查看登录日志及登录失败用户的ip-lastb

    Linux 查看登录成功的用户信息 命令: last 最新的登录记录在最前面,所以可以用 一下命令来查看. last | less 查看登录失败的用户信息 命令: lastb 查看登录日志 命令:  ...

  5. 看似无参却有参-----JS中的函数传参

    事件event JS的事件event是一个非常大的对象,不管是什么事件,事件的详情都会绑定到全局变量event中.这样做之所以安全,就是因为JS是单线程的. <html> <body ...

  6. 【LeetCode】166. Fraction to Recurring Decimal

    Fraction to Recurring Decimal Given two integers representing the numerator and denominator of a fra ...

  7. 【LeetCode】127. Word Ladder

    Word Ladder Given two words (start and end), and a dictionary, find the length of shortest transform ...

  8. 【LeetCode】144. Binary Tree Preorder Traversal (3 solutions)

    Binary Tree Preorder Traversal Given a binary tree, return the preorder traversal of its nodes' valu ...

  9. MyEclipse和Microsoft Visual Studio常用快捷键

    MyEclipse       Visual Studio            NOTEF5            F11                 单步执行 F6            F1 ...

  10. iOS - OC 与 C 互相操作

    前言 在 Objective-C 语言中,我们可以使用 C.Swift 语言编写代码,我们可以导入任意用 C.Swift 写的 Cocoa 平台框架.C 框架或 Swift 类库. 1.在 C 中使用 ...