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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
Sep 01 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
js数组依据下标删除元素
Apr 14 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
jquery ajax 请求小技巧实例分析
Nov 11 jQuery
Postman无法正常返回结果问题解决
Aug 28 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
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
laravel请求参数校验方法
2019/10/10 PHP
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
原生javascript实现的分页插件pagenav
2014/08/28 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
Python双向循环链表实现方法分析
2018/07/30 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
python基于openpyxl生成excel文件
2020/12/23 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
Yahoo-PHP面试题4
2012/05/05 面试题
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
法律进学校实施方案
2014/03/15 职场文书
一年级学生评语大全
2014/04/21 职场文书
书香家庭事迹材料
2014/05/09 职场文书
借款协议书
2014/09/16 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书
导游词之天下银坑景区
2019/11/21 职场文书