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 相关文章推荐
jQuery select控制插件
Aug 17 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
vue移动端城市三级联动组件使用详解
Jul 26 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
Oct 29 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
第三节--定义一个类
2006/11/16 PHP
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php addslashes和mysql_real_escape_string
2010/01/24 PHP
php中利用explode函数分割字符串到数组
2014/02/08 PHP
PHP入门教程之面向对象的特性分析(继承,多态,接口,抽象类,抽象方法等)
2016/09/11 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
js实现瀑布流的一种简单方法实例分享
2013/11/04 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
最常用的jQuery表单验证(简单)
2017/05/23 jQuery
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python实现的快速排序算法详解
2017/08/01 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
切尔西足球俱乐部官方网上商店:Chelsea FC
2019/06/17 全球购物
工程力学硕士生的自我评价范文
2013/11/16 职场文书
物流仓管员岗位职责
2013/12/04 职场文书
执行力心得体会
2013/12/31 职场文书
劳动实践课感言
2014/02/01 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python