AngularJS HTML DOM详解及示例代码


Posted in Javascript onAugust 17, 2016

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

S.No. 名称 描述
1 ng-disabled 禁用一个给定的控制
2 ng-show 显示一个给定的控制
3 ng-hide 隐藏在给定的控制
4 ng-click 表示AngularJS click事件

 ng-disabled 指令

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

<input type="checkbox" ng-model="enableDisableButton">Disable Button
<button ng-disabled="enableDisableButton">Click Me!</button>

ng-show 指令

添加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详解及示例代码

以上就是对AngularJS HTML DOM资料的整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
js中取得变量绝对值的方法
Jan 03 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
js实现简单贪吃蛇游戏
May 15 Javascript
AngularJS表格详解及示例代码
Aug 17 #Javascript
AngularJS过滤器详解及示例代码
Aug 16 #Javascript
AngularJS控制器详解及示例代码
Aug 16 #Javascript
AngularJS表达式讲解及示例代码
Aug 16 #Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 #Javascript
jQuery多文件异步上传带进度条实例代码
Aug 16 #Javascript
AngularJS指令详解及示例代码
Aug 16 #Javascript
You might like
如何跨站抓取别的站点的页面的补充
2006/10/09 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
php object转数组示例
2014/01/15 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
js+html5实现canvas绘制网页时钟的方法
2016/05/21 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
express 项目分层实践详解
2018/12/10 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
python下载图片实现方法(超简单)
2017/07/21 Python
详解flask表单提交的两种方式
2018/07/21 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
原生python实现knn分类算法
2019/10/24 Python
python 画函数曲线示例
2019/12/04 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
社区禁毒工作方案
2014/06/02 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
《灰雀》教学反思
2016/02/19 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
Mysql 如何查询时间段交集
2021/06/08 MySQL