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. C#多线程同步事件及等待句柄AutoResetEvent 和 ManualResetEvent

    最近捣鼓了一下多线程的同步问题,发现其实C#关于多线程同步事件处理还是很灵活,这里主要写一下,自己测试的一些代码,涉及到了AutoResetEvent 和 ManualResetEvent,当然还有也 ...

  2. 上传AppStore出现:Unexpected CFBundleExecutable Key 错误

    解决办法:就是把无用的CFBundle删除掉. 根据提示,找到对应第三方的SDK, 找到第三方的info.plist文件,删除里面的Executable file对应的一整行,包括值.

  3. CDN的combo技术能把多个资源文件合并引用，减少请求次数

    CDN的combo技术能把多个资源文件合并引用,减少请求次数.比如淘宝的写法: <link rel="stylesheet" href="//g.alicdn.co ...

  4. Traditional Language Model

    Traditional Language Model通常用于回答下述问题: How likely is a string of English words good English ? \(p_{LM ...

  5. [转]eclipse快捷键

    Ctrl+1 快速修复Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当前行和下面一行交互位置(特别实用 ...

  6. NAT穿越

    1.NAT类型 目前主要的NAT类型有如下几种: 1)Full-cone NAT, also known as one-to-one NAT 一旦一个内网地址 (iAddr:iPort) 被映射到一个 ...

  7. 安装MariaDB和简单配置

    1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB systemctl start maria ...

  8. Property和attribute的区别[转]

    Attribute和Property都可以翻译成“属性”,有的地方用Attribute表示“属性”,有的地方又在用Property,初 学者常常在这两个单词间“迷失”,甚至认为二者没有区别,是一样的. ...

  9. Bash 什么时候会给 HOME 赋初始值

    今天无意发现下面这个表现: $  env -i bash -c cd bash: line 0: cd: HOME not set $ env -i bash -c 'echo $HOME' 这表明了 ...

  10. loopback文档翻译

    最近在学习loopback,期间在strongloop的官网翻译了部分文章. 见:https://docs.strongloop.com/pages/viewpage.action?pageId=60 ...