简介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 相关文章推荐
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
three.js实现圆柱体
Dec 30 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
JavaScript实现缓动动画
Nov 25 Javascript
在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编程最快明白》第二讲 数字、浮点、布尔型、字符串和数组
2010/11/01 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
jQuery源码解读之removeAttr()方法分析
2015/02/20 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python判断直线和矩形是否相交的方法
2015/07/14 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
PyTorch预训练的实现
2019/09/18 Python
python模拟点击网页按钮实现方法
2020/02/25 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
tensorflow常用函数API介绍
2020/04/19 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
为什么使用接口?
2014/08/13 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
销售找工作求职信
2013/12/20 职场文书
违纪检讨书2000字
2014/02/08 职场文书
高三家长寄语
2014/04/03 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
Python 中random 库的详细使用
2021/06/03 Python