简介AngularJS的HTML DOM支持情况


Posted in Javascript onJune 17, 2015

以下指令可用于应用程序数据绑定到HTML DOM元素的属性。

简介AngularJS的HTML DOM支持情况

 添加ng-show属性到一个HTML按钮,并把它传递模型。绑定模型到复选框,看看以下变化。

<input type="checkbox" ng-model="showHide1">Show Button
<button ng-show="showHide1">Click Me!</button>

ng-hide 指令

添加ng-hide属性为HTML按钮,通过它的模型。绑定模型到复选框,看看以下变化。

<input type="checkbox" ng-model="showHide2">Hide Button
<button ng-hide="showHide2">Click Me!</button>

ng-click 指令

添加ng-click属性为HTML按钮并更新模型。模型绑定HTML看看结合的变化。

<p>Total click: {{ clickCounter }}</p></td>
<button ng-click="clickCounter = clickCounter + 1">Click Me!</button>

例子

下面的例子将展示上述所有指令。
testAngularJS.html

<html>
<head>
<title>AngularJS HTML DOM</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="">
<table border="0">
<tr>
  <td><input type="checkbox" ng-model="enableDisableButton">Disable Button</td>
  <td><button ng-disabled="enableDisableButton">Click Me!</button></td>
</tr>
<tr>
  <td><input type="checkbox" ng-model="showHide1">Show Button</td>
  <td><button ng-show="showHide1">Click Me!</button></td>
</tr>
<tr>
  <td><input type="checkbox" ng-model="showHide2">Hide Button</td>
  <td><button ng-hide="showHide2">Click Me!</button></td>
</tr>
<tr>
  <td><p>Total click: {{ clickCounter }}</p></td>
  <td><button ng-click="clickCounter = clickCounter + 1">Click Me!</button></td>
</tr>
</table>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

输出

在Web浏览器打开textAngularJS.html,看到以下结果:

简介AngularJS的HTML DOM支持情况

Javascript 相关文章推荐
纯JS实现的批量图片预览加载功能
Aug 14 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
Mar 13 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
理解javascript中的with关键字
Feb 15 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 #Javascript
JavaScript AOP编程实例
Jun 16 #Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 #Javascript
动态加载jQuery的方法
Jun 16 #Javascript
详解AngularJS中的表格使用
Jun 16 #Javascript
js+HTML5实现视频截图的方法
Jun 16 #Javascript
AngularJS中的过滤器使用详解
Jun 16 #Javascript
You might like
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
在PHP 7下安装Swoole与Yar,Yaf的方法教程
2017/06/02 PHP
ThinkPHP5 验证器的具体使用
2018/05/31 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
2013/08/13 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
javascript中Array数组的迭代方法实例分析
2015/02/04 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
2017/03/08 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
JS触摸与手势事件详解
2017/05/09 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
Python实现平行坐标图的两种方法小结
2019/07/04 Python
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
瑞典耳机品牌:URBANISTA
2019/12/03 全球购物
优纳科技软件测试面试题
2012/05/15 面试题
中学自我评价
2014/01/31 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
高中班主任心得体会
2016/01/07 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python