AngularJS 入门教程之HTML DOM实例详解


Posted in Javascript onJuly 28, 2016

AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.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>

运行效果:

按钮

true

实例讲解:

ng-disabled 指令绑定应用程序数据 "mySwitch" 到 HTML 的 disabled 属性。

ng-model 指令绑定 "mySwitch" 到 HTML input checkbox 元素的内容(value)。

如果 mySwitch 为true, 按钮将不可用:

<p>
<button disabled>点我!</button>
</p>

如果 mySwitch 为false, 按钮则可用:

<p>
<button>点我!</button>
</p>

ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.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):

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">我是可见的。</p>

</div>

</body>
</html>

运行结果:

我是可见的。

Note 在下一个章节中,我们将为大家更多通过点击按钮来隐藏 HTML 元素的实例。

ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.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 资料的整理,后续继续补充,希望能帮助编程AngularJS的朋友。

Javascript 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 #Javascript
轮播的简单实现方法
Jul 28 #Javascript
关于JS变量和作用域详解
Jul 28 #Javascript
jquery轮播的实现方式 附完整实例
Jul 28 #Javascript
AngularJS入门教程中SQL实例详解
Jul 27 #Javascript
AngularJS入门教程之表格实例详解
Jul 27 #Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 #Javascript
You might like
php表单提交问题的解决方法
2011/04/12 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php打开文件fopen函数的使用说明
2013/07/05 PHP
php图像处理类实例
2015/07/28 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
浅析Javascript中“==”与“===”的区别
2014/12/23 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
Three.js利用性能插件stats实现性能监听的方法
2017/09/25 Javascript
layer实现关闭弹出层刷新父界面功能详解
2017/11/15 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
python解决字典中的值是列表问题的方法
2013/03/04 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
小摄影师教学反思
2014/04/27 职场文书
产品质量保证书
2014/04/29 职场文书
计算机毕业生求职信
2014/06/10 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
雨花台导游词
2015/02/06 职场文书
大学生毕业个人总结
2015/02/15 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js