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 相关文章推荐
ext 列表页面关于多行查询的办法
Mar 25 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 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
操作Oracle的php类
2006/10/09 PHP
PHP CURL模拟GET及POST函数代码
2010/04/25 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP设置Cookie的HTTPONLY属性方法
2017/02/09 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
PHP缓存工具XCache安装与使用方法详解
2018/04/09 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
javascript实现下雨效果
2017/03/27 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
Python中optparse模块使用浅析
2015/01/01 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
python的sys.path模块路径添加方式
2020/03/09 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
老总助理工作岗位职责
2014/02/06 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
迎国庆主题班会
2015/08/17 职场文书
继续教育心得体会(共6篇)
2016/01/19 职场文书
Go标准容器之Ring的使用说明
2021/05/05 Golang
OpenCV 图像梯度的实现方法
2021/07/25 Python