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. Android四大组件之—— BroadcastReceiver的使用

    BroadcastReceiver又名广播接收者.既然它用于接收广播,那一定就有人负责发送. Android系统中的广播: 在现实生活中,我们都知道广播是什么,用来做什么.例如公园里的广播,主要通知游 ...

  2. 【转】Java面试题全集2.2（上）

    146.什么是IoC和DI?DI是如何实现的? 答:IoC叫控制反转,是Inversion of Control的缩写,DI(Dependency Injection)叫依赖注入,是对IoC更简单的诠 ...

  3. Debian8搭建php环境

    安装apache 新装的系统发现 apt-get install apach<tab> 没有自动补全 请查看 这里 apt-get install apache2 安装mysql apt- ...

  4. ssh项目将搜索条件进行联动

    <s:form namespace="/tb" action="tenderList" name="searchForm" id=&q ...

  5. 教你一招：Win10系统如何正确卸载edge浏览器？

    Edge浏览器作为Win10系统默认浏览器,尽管我们将其他浏览器设置为默认程序,但是有时候还是会自动弹出,非常的不爽,但是在控制面板中却又找不到卸载“Edge”浏览器的选项.下面小编就教大家卸载“Ed ...

  6. Flymeos插桩适配教程

    插桩适配前提,安装Ubuntu或者其他linux系统. 安装JDK7 sudo apt--jdk Ubuntu 16.04与基于它的版本,需要添加源 sudo add-apt-repository p ...

  7. 使用Maven Assembly plugin将依赖打包进jar

    一个Eclipse的工程,在pom中配置了若干依赖,需要将pom中所有的依赖全部打包进一个jar包中,可以选择的方案有maven-assembly-plugin和fatjar.以前采用fatjar进行 ...

  8. Java细粒度锁实现的3种方式

    最近在工作上碰见了一些高并发的场景需要加锁来保证业务逻辑的正确性,并且要求加锁后性能不能受到太大的影响.初步的想法是通过数据的时间戳,id等关键字来加锁,从而保证不同类型数据处理的并发性.而java自 ...

  9. 问你觉得iOS7为什么要扁平化，扁平化和之前的比有什么优势

    问你觉得iOS7为什么要扁平化,扁平化和之前的比有什么优势 苹果首席设计师谈为何会在iOS上选择扁平风格http://ndnews.oeeee.com/html/201306/11/71078.htm ...

  10. 数据库大数据处理---复制（SQLServer)

    复制? 复制起初并不是用于作为高可用性功能而设计的,实际上复制的概念就像其名称一样,用于复制数据.比如将某个库中的数据“复制”到另一个库,到另一个实例中,由OLTP复制到OLAP环境中,由某数据中心复 ...