ylbtech-AngularJS:HTML DOM
1.返回顶部
1、

AngularJS HTML DOM


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


ng-disabled 指令

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

AngularJS 实例

<div ng-app="" ng-init="mySwitch=true">

<p>
<button ng-disabled="mySwitch">点我!</button>
</p> <p>
<input type="checkbox" ng-model="mySwitch">按钮
</p> <p>
{{ mySwitch }}
</p> </div>

尝试一下 »

实例讲解:

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

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

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

<p>
<button disabled>点我!</button>
</p>
如果 mySwitch 为false, 按钮则可用: <p>
<button>点我!</button>
</p>
 

ng-show 指令

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

AngularJS 实例

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div>

尝试一下 »

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

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

AngularJS 实例

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">我是可见的。</p>

</div>

尝试一下 »

在下一个章节中,我们将为大家介绍更多通过点击按钮来隐藏 HTML 元素的实例。

ng-hide 指令

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

AngularJS 实例

<div ng-app="">

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>

</div>

尝试一下 »

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

AngularJS:HTML DOM的更多相关文章

  1. AngularJS:何时应该使用Directive、Controller、Service?【新手必看】

    (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天 ...

  2. AngularJS中的DOM与事件

      前 言 AngularJS中的DOM与事件   AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令.  ng-disabled="true/false" ...

  3. AngularJS:何时应该使用Directive、Controller、Service?

    AngularJS:何时应该使用Directive.Controller.Service? (这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC ...

  4. HTML DOM(一):认识DOM

     分类: HTML/JavaScript/CSS(10)  版权声明:本文为博主原创文章,转载请注明出处http://blog.csdn.net/ghsau. 什么是DOM?       通过 Jav ...

  5. JavaScript 是如何工作:Shadow DOM 的内部结构 + 如何编写独立的组件!

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 17 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  6. 小tips:HTML DOM中的children和childNodes属性

    childNodes 属性 标准的,childNodes 属性返回节点的子节点集合,以 NodeList 对象.包括HTML节点,所有属性,文本.可以通过nodeType来判断是哪种类型的节点,只有当 ...

  7. 走进DOM:HTML DOM

    DOM(Document Object Model)即文档对象模型.针对HTML和XML 文档的API(应用程序接口). DOM描绘了一个层次化的节点树,执行开发者加入.移除和改动页面的某一部分.当然 ...

  8. Qt 学习之路 2(60):使用 DOM 处理 XML

    Qt 学习之路 2(60):使用 DOM 处理 XML  豆子  2013年8月3日  Qt 学习之路 2  9条评论 DOM 是由 W3C 提出的一种处理 XML 文档的标准接口.Qt 实现了 DO ...

  9. virtual DOM的作用:将DOM的维护工作由系统维护转交给virtual DOM维护

    virtual DOM的作用:将DOM的维护工作由系统维护转交给virtual DOM维护 两个方面:对应用端 & 对DOM端(渲染准备的计算) 1.将DOM状态的维护工作由系统维护转交给vi ...

随机推荐

  1. vRA7 Business error “Untrusted certificate chain”

    报错截图: 服务无法注册 第一步:登录vRB 5480页面,取消到vRA的注册 第二部:SSH登录到VRB中,查看bio-ssl.keystore.password. cat /shared/cata ...

  2. IDEA配置文件的保存目录

    IntelliJ IDEA 的实时代码模板保存在 /templates 目录下,其他系统目录位置如下:(因为目录名在各个系统上是一致的,建议用硬盘搜索工具搜索即可) Windows: . Linux: ...

  3. springcloud-Api网关服务Zuul

    springcloud项目例子:链接:https://pan.baidu.com/s/1O1PKrdvrq5c8sQUb7dQ5Pg 密码:ynir 1.由来: 如果我的微服务中有很多个独立服务都要对 ...

  4. Datax官方笔记总结

    # DataX DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.SQL Server.Oracle.PostgreSQL.HDFS.Hive.HBase.OTS. ...

  5. VC数据类型

    不同编码格式下的字符串处理及相互转化: ◆ 大家在编程时经常遇到的数据类型:● Ansi:char.char * .const char *CHAR.(PCHAR.PSTR.LPSTR).LPCSTR ...

  6. div css 练习1

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. MySql 创建/删除数据库

    C:\Users\Mr.Black>mysql -u root -pEnter password: ****Welcome to the MySQL monitor.  Commands end ...

  8. 任务1-1 了解Web基本概念

    1.认识网页 从图中可以看到,网页主要由文字.图像和超链接等元素构成.当然,除了这些元素,网页中还可以包含音频.视频及Flash. 为了快速了解网页是如何形成的,接下来查看一下网页的源代码

  9. The 2016 ACM-ICPC Asia Dalian Regional Contest

    一共a了6题 A:找二分图,判断有没有冲突或者孤立的店 题解:直接dfs即可 #include<map> #include<set> #include<cmath> ...

  10. 初学者的Node.js学习历程

    废话篇: 对于我这个新手的不能再白菜的人来说,nodejs的大名都有耳闻,所以说他是一项不可不克服的技能也是可以说的.但是之前没有搞清楚的情况之下胡乱的猜测,是的我对node.js没有一个具体的概念的 ...