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

ng-disabled 指令：

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<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> 

</body>

</html>

讲解：

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

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

如果 mySwitch 为true, 按钮将不可用；如果 mySwitch 为false, 按钮则可用。

ng-show指令：

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="">

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

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

</div> 

</body>

</html>

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

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

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

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

</div>

ng-hide指令：

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

</head>

<body>

<div ng-app="">

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

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

</div> 

</body>

</html>

AngularJS HTML DOM的更多相关文章

  1. AngularJS学习之旅—AngularJS HTML DOM(十三)

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

  2. AngularJs HTML DOM、AngularJS 事件以及模块的学习（5）

    今天的基础就到了操作DOM,事件和模块的学习,其实我个人感觉学习起来AngularJS并没有想象中的那么的艰难,可能是因为这个太基础化吧,但是我们从初学开始就应该更加的自信一些,后来我可能会写一个小的 ...

  3. 【11】AngularJS HTML DOM

    AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 ...

  4. AngularJS HTML DOM& 事件

    AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性 <div ng-app= ...

  5. [译]AngularJS中DOM操作

    再翻译一篇干货短文,原文:AngularJS jQuery 虽然Angularjs将我们从DOM的操作中解放出来了,但是很多时候我们还是会需要在controller/view加载之后执行一些DOM操作 ...

  6. AngularJS 从DOM中获取scope

    节选官方文档: 原文:https://docs.angularjs.org/guide/scope scope是附加在DOM上,使用了ng-app指令的DOM就是root scope.一般是<h ...

  7. AngularJS THML DOM

    AngularJS为HTML Dom元素属性提供了绑定应用数据的指令. data-ng-disabled指令直接提供了绑定应用程序的数据到HTML元素的disabled属性. <!DOCTYPE ...

  8. AngularJS操作DOM——angular.element

    addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容a ...

  9. 用AngularJS操作DOM

    在angular中使用第三方插件时最好都封装到指令(directives)中去,DOM操作也最好都解构到指令中. <!DOCTYPE html> <html lang="e ...

随机推荐

  1. CSS编写技巧

    1.尽量少的使用全局的重置代码 全局重置代码:*{margin:0; padding:0;}对于熟悉CSS的人来说并不陌生,并且有很多人的第一句CSS代码就是这句.它可以避免不同浏览器的默认间距不同而 ...

  2. New blog

    New blog //域名还没备案_(:з」∠)_

  3. UnixC学习小结

    1.malloc工作原理:     malloc使用一个数据结构(链表)维护分配空间     链表的构成:分配的空间/上一个空间数据/下一个空间/空间大小等信息.     对malloc分配的空间不要 ...

  4. 时间戳 时区 java mysql

    当一个时间 比如2016年5月6日,生成时间戳.这个运算是与时区有关的.首先得确认这个时间是哪个时区的,然后转换成utc时区的时间.再减去1970,得到的秒数,就是时间戳. 时间戳是个一定的值,他与时 ...

  5. AE开发使用内存图层

    AE开发中,有时需要从磁盘中读取一些文件信息如坐标点转为图层并进行分析,此过程并不需要坐标点入库之类的操作,就可以创建一个内存图层解决问题.创建内存图层需要用到InMemoryWorkspaceFac ...

  6. C# byte[]、struct、intptr等的相互转换

    1.struct byte[]互相转换 //struct转换为byte[] public static byte[] StructToBytes(object structObj) { int siz ...

  7. Linux字符集的查看及修改

    一·查看字符集 字符集在系统中体现形式是一个环境变量,以CentOS6.5为例,其查看当前终端使用字符集的方式可以有以下几种方式: 第一种: [root@Testa-www tmp]# echo $L ...

  8. win32 disk imager使用后u盘容量恢复

    XP下进入CMD命令窗体,Vista及7下右键以管理员方式运行DOS窗体 输入DISKPART,会显示计算机名,及DISKPART>命令行 在此状态下输入LIST DISK查看机器磁盘,正常Di ...

  9. 阿里巴巴分布式服务框架dubbo学习笔记

    Dubbo是什么? Dubbo是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案.简单的说,dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的 ...

  10. MySql 杂记

    1:声明一个int变量时,设置它默认为0,而不是空或null. int 型,取值范围-2,147,483,648 到 2,147,483,647 ,默认值是 0 int是值类型,读内存区间中指定长度单 ...