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. Java static 静态代码块执行分析

    假设有这样一个类: public class Utils { static { Log.i("static","isLoad!"); } public stat ...

  2. VirtualBox中Ubuntu 14.04屏幕分辨率不能设置的问题

    VirtualBox中Ubuntu 14.04屏幕分辨率不能设置的问题   在VirtualBOx虚拟机中Ubuntu 14.04设置屏幕分辨率,怎么点都没反应. 方法一:安装与你的Ubuntu-Gu ...

  3. Pycharm 输出中文或打印中文乱码现象的解决办法

    1. 确保文件开头加上以下代码: # -*- coding:utf-8 -*- 还可以加上 import sys reload(sys) sys.setdefaultencoding('utf-8') ...

  4. BZOJ 1861: [Zjoi2006]Book 书架

    1861: [Zjoi2006]Book 书架 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 1290  Solved: 740[Submit][Stat ...

  5. bzoj 4557: [JLoi2016]侦察守卫 树归

    bzoj 4557: [JLoi2016]侦察守卫 设f[x][j]表示覆盖以x为根的子树的所有应该被覆盖的节点,并且以x为根的子树向下j层全部被覆盖的最小代价. 设g[x][j]表示与x距离大于j全 ...

  6. java中Integer,String判断相等与integer的比较大小

    package sfk.bbs.test.springjsbctempletTest; import static org.junit.Assert.*; import org.junit.Test; ...

  7. New blog

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

  8. Maven+Spring MVC Spring Mybatis配置

    环境: Eclipse Neon JDK1.8.0 Tomcat8.0 先决条件: Eclipse先用maven向导创建web工程.参见本站之前随笔. 本机安装完成mysql5:新建用户xuxy03设 ...

  9. Canvas实例

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  10. Angular2.0快速开始

    参考资料: Angular2.0快速开始 AngularJS2 教程