AngularJS HTML DOM

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>
时间: 2024-10-11 01:36:21

AngularJS HTML DOM的相关文章

【11】AngularJS&#160;HTML DOM

AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. <div ng-app=""> <p> <button ng-disabled="mySwitch">点我!</button> </p> <p> <in

AngularJs HTML DOM、AngularJS 事件以及模块的学习(5)

今天的基础就到了操作DOM,事件和模块的学习,其实我个人感觉学习起来AngularJS并没有想象中的那么的艰难,可能是因为这个太基础化吧,但是我们从初学开始就应该更加的自信一些,后来我可能会写一个小的项目来练习一下吧,但是至少现在我还不能熟练的写不出来.下面就简单的实例一下吧. 一.AngularJs HTML DOM AngularJS为HTML DOM元素的属性提供了绑定应用数据的指令. (1).ng-disabled 指令,直接绑定应用程序数据到HTML的disabled属性 在浏览器中浏

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

1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. ng-show 指令:ng-show 指令隐藏或显示一个 HTML 元素. ng-hide 指令:ng-hide 指令用于隐藏或显示 HTML 元素. <!DOCTYPE html> <html> <head> <meta

AngularJS THML DOM

AngularJS为HTML Dom元素属性提供了绑定应用数据的指令. data-ng-disabled指令直接提供了绑定应用程序的数据到HTML元素的disabled属性. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X

angularJS之DOM操作

addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本contents()-获得匹配元素集合中每个元素的子元素,包括文字和

AngularJS操作DOM——angular.element

addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本contents()-获得匹配元素集合中每个元素的子元素,包括文字和

AngularJS html+DOM+ng-click事件

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性. ng-show 指令用于设置应用部分是否可见. ng-show="true" 设置 HTML 元素可见. ng-show="false" 设置 HTML 元素不可见. ng-hide 指令用于设置应用部分是否可见. ng-hide="true" 设置 HTML 元素不可见. ng-hide="false" 设置 HTML 元素可见. 实

angularjs教程——Dom操作相关指令详解

一.ng-show/ng-hide <div ng-show="true">{{text}}</div> //显示 <div ng-show="false">{{text}}</div>//隐藏 二.ng-if 三.ng-switch <!DOCTYPE HTML> <html ng-app='myApp'> <head> <meta http-equiv="Cont

AngularJs我的学习整理(不定时修改)

最近一月份的日子,学习了AngularJs,还只是刚刚入门而已.了解了基本的语法规则以及很简单的应用.仔细想想,学习AngularJs的时间大概半个月的时间,每天花在AngularJs上两三个小时. 在短短的学习入门时间,也想简简单单地做一个阶段性的总结.下一次的学习应该是进阶.计划准备在NodeJs入门之后进阶AngularJs和NodeJs. AngularJs是什么东东? AngularJS 使得开发现代的单一页面应用程序变得更加容易(单一页面应用程序SPAs:Single Page Ap