【11】AngularJS HTML DOM

AngularJS HTML DOM



AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。


ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

  1. <div ng-app="">
  2. <p>
  3. <button ng-disabled="mySwitch">点我!</button>
  4. </p>
  5. <p>
  6. <input type="checkbox" ng-model="mySwitch">按钮
  7. </p>
  8. </div>

效果:

实例讲解:

ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。

ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容(value)。

如果 mySwitch 为true, 按钮将不可用:

  1. <p>
  2. <button disabled>点我!</button>
  3. </p>

如果 mySwitch 为false, 按钮则可用:

  1. <p>
  2. <button>ClickMe!</button>
  3. </p>

ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

  1. <div ng-app="">
  2. <p ng-show="true">我是可见的。</p>
  3. <p ng-show="false">我是不可见的。</p>
  4. </div>

结果:

ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。

你可以使用表达式来计算布尔值( true 或 false):

  1. <div ng-app="">
  2. <p ng-show="hour > 12">我是可见的。</p>
  3. </div>

ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

  1. <div ng-app="">
  2. <p ng-hide="true">我是不可见的。</p>
  3. <p ng-hide="false">我是可见的。</p>
  4. </div>
时间: 02-21

【11】AngularJS HTML DOM的相关文章

企业IT管理员IE11升级指南【11】—— 通过SCCM 2012和WSUS部署Internet Explorer 11

企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flash的支持 [3]—— IE11 新的GPO设置 [4]—— IE企业模式介绍 [5]—— 不跟踪(DNT)例外 [6]—— Internet Explorer 11面向IT专业人员的常见问题 [7]—— Win7和Win8.1上的IE11功能对比 [8]—— Win7 IE8和Win7 IE11对比

【web开发】☆★之利用POI操作Excel表格系列教程【11】单元格合并

[web开发]☆★之利用POI操作Excel表格系列教程[11]单元格合并 package csg.xiaoye.poidemo; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSSFWorkbook; import org.apache.poi.ss.usermodel.Cell; import org.apache.poi.ss.usermodel.Row; import org.apache.p

剑指Offer:旋转数组的最小数字【11】

剑指Offer:旋转数组的最小数字[11] 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素. 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转,该数组的最小值为1. NOTE:给出的所有元素都大于0,若数组大小为0,请返回0. 解题分析 我们用两个坐标,Left,Right分别表示左右两个递增序列的下标,刚开始L为0,R为4: 当Arr[Mid]>Arr[Left],可以说明,Mid及左边构

【1-1】统计数字问题

′问题描述: 一本书的页码从自然数 1 开始顺序编码直到自然数 n.书的页码按照通常的习惯编排, 每个页码都不含多余的前导数字 0.例如,第 6 页用数字 6 表示,而不是 06 或 006 等.数 字计数问题要求对给定书的总页码 n,计算出书的全部页码中分别用到多少次数字 0,1, 2,-,9. ′编程任务: 给定表示书的总页码的 10 进制整数 n (1≤n≤109 ) .编程计算书的全部页码中分别用 到多少次数字 0,1,2,-,9. ′数据输入: 输入数据由文件名为 input.txt

【Go语言】【11】GO语言的包和函数

还记得<[2]Sublime配置GO开发环境>的入门例子吗? 当然不记得了:) 这篇文章距离上篇时间太久远了,遥远的我都快忘记了.还是把截图贴上吧 该例子中的func main()表示这是一个名称叫main的方法,而package main表示这个方法在main包内,这两部分的内容就是本节要分享的知识. 这么简单? 是的,简单而不简约,呵呵,接着往下看! 开发一个应用系统,考虑到代码的可读性,往往会把代码拆分到不同的包,再给包起一个好记的名字,这样一眼就能明白该包的用途,比如math包,这个就

C++/CLI 托管C++之导出注释【11】

将封装好的CLI Dll提供给NET使用时,当然少不了注释的添加.本文就是介绍使用XML注释的方式,获取Dll对应的注释.涉及两点: [1]CLI的成员的注释需要按照标准的方式进行添加,简单点就是C#怎样添加注释///, CLI也要按照同样的方式添加,如下图: /// <summary> /// 1 字符串测试类 /// </summary> public ref class StrCls { public: /// <summary> /// 1.1 字符串作为输入参

【实战问题】【11】导入Maven项目后报错,Project configuration is not up-to-date with pom.xml. Run project configuration update

正文: 在项目上右键——[Maven]——[Update Project Configuration……] 这时会打开一个(Update Maven Dependencies)的对话框,然后勾选住出错的项目,点击Ok 参考博客: [Maven]Project configuration is not up-to-date with pom.xml错误解决方法_MacroCheng_新浪博客http://blog.sina.com.cn/s/blog_62f987620100x8xb.html 原

【转】angularjs指令中的compile与link函数详解

这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令

【repost】Javascript操作DOM常用API总结

Javascript操作DOM常用API总结 文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念 在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有