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 Timing
Apr 21 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
Javascript正则控制文本框只能输入整数或浮点数
Sep 02 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
浅谈JS的原型和原型链
Jun 04 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
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
理解JavaScript原型链
2016/10/25 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
图解javascript作用域链
2019/05/27 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
Python实现获取本地及远程图片大小的方法示例
2018/07/21 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
北美主要的汽车零部件零售商:AutoShack.com
2019/02/23 全球购物
大学生毕业的自我评价分享
2014/01/02 职场文书
家长给孩子的评语
2014/01/30 职场文书
大学生就业意向书范文
2014/04/01 职场文书
体育馆的标语
2014/06/24 职场文书
学校领导班子对照检查材料
2014/09/24 职场文书
学术会议领导致辞
2015/07/29 职场文书
小学英语课教学反思
2016/02/15 职场文书