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. redis-删除所有key

    删除所有Key,可以使用Redis的flushdb和flushall命令 //删除当前数据库中的所有Key flushdb //删除所有数据库中的key flushall 如果要访问 Redis 中特 ...

  2. 【USACO 2.3】The Longest Prefix

    题意: 给你一个少于200000的字符串,求最长的可以划分为给定词典里的单词的前缀. 题解: dp[i]表示第i位结尾的前缀是否可行,然后枚举每一位如果dp[i-1]==1,枚举所有单词,匹配成功的单 ...

  3. Ubuntu/Mint更换阿里云源

    sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak #备份 sudo vim /etc/apt/sources.list #修改 sudo ...

  4. Thinking in java学习笔记之final

  5. UTF-8 Unicode ANSI网页编码的区别

    1.ASCII码 我们知道,在计算机内部,所有的信息最终都表示为一个二进制的字符串.每一个二进制位(bit)有0和1两种状态,因此八个二进制位就可以组合出256种状态,这被称为一个字节(byte).也 ...

  6. ETL基础1（概念）

    抽取(Extract): 一般抽取过程需要连接到不同的数据源,以便为随后的步骤提供数据.这一部分看上去简单而琐碎,实际上它是 ETL 解决方案的成功实施的一个主要障碍. 转换(Transform): ...

  7. c#使用正则表达式抓取a标签的链接和innerhtml

    //读取网页html string text = File.ReadAllText(Environment.CurrentDirectory + "//test.txt", Enc ...

  8. 这可能是由于服务终结点绑定未使用 HTTP 协议造成的 .这还可能是由于服务器中止了 HTTP 请求上下文

    一个很简单的WCF报这个异常,才发现是 Response的类无法被序列化 因为在Response类里有一个枚举 StatusType,而系统的枚举值是 从0-5,但是数据库里多了一个值为6的记录 这样 ...

  9. java学习笔记一

    数据类型 Java数据类型分为两大类:基本数据类型和复合数据类型,其中复合数据类型包括数组.类和接口. 基本数据类型(默认值只在类中有,函数变量无初始值) int 32bit 0 boolean 1b ...

  10. 四、Shell输入、输出功能和字符颜色设置

    一.Shell输入功能 1.键盘输入   方式一: [root@Salve four]# cat test.sh #!/bin/bash #-e 参数可以解析语句中的转义字符 echo -e &quo ...