简介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 相关文章推荐
JavaScript与Image加载事件(onload)、加载状态(complete)
Feb 14 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
javascript实现抢购倒计时程序
Aug 26 Javascript
JS内置对象和Math对象知识点详解
Apr 03 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
纯JS实现五子棋游戏
May 28 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数组的维度
2013/06/10 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
php+mysql实现无限级分类
2015/11/11 PHP
Smarty模板语法详解
2019/07/20 PHP
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
vue.js 上传图片实例代码
2017/06/22 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
javascript 对象 与 prototype 原型用法实例分析
2019/11/11 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
2021/02/06 Javascript
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
Python将多个excel表格合并为一个表格
2021/02/22 Python
Django如何配置mysql数据库
2018/05/04 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python多任务之协程的使用详解
2019/08/26 Python
python try...finally...的实现方法
2020/11/25 Python
深入浅析css3 中display box使用方法
2015/11/25 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
请用Python写一个获取用户输入数字,并根据数字大小输出不同信息的脚本
2014/05/20 面试题
语文教学感言
2014/02/06 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers