简介AngularJS的HTML DOM支持情况
更新时间：2015年06月17日 09:42:37 投稿：goldensun
这篇文章主要介绍了AngularJS的HTML DOM支持情况,包括ng-hide和ng-click指令的使用,需要的朋友可以参考下
以下指令可用于应用程序数据绑定到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 异步解决实现方法的相关资料,需要的朋友可以参考下2017-06-06
这篇文章主要介绍了AngularJS折叠菜单实现方法,结合完整实例形式分析了AngularJS实现折叠菜单的具体步骤与相关操作技巧,需要的朋友可以参考下2017-05-05
本文主要介绍AngularJS过滤器，这里整理了详细的资料和提供了示例代码及实例效果图，有兴趣的小伙伴可以参考下2016-08-08
本文主要讲解AngularJS 过滤器,这里整理了过滤器的相关资料并附示例代码，帮助大家学习AngularJS的知识，有需要的小伙伴可以参考下2016-08-08
这篇文章主要介绍了Angular 实现一个repeat指令的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了使用angular写一个hello world的方法及示例,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了使用AngularJS中的SCE来防止XSS攻击的方法,依靠合理地转码为HTML来预防跨站脚本漏洞共计,需要的朋友可以参考下2015-06-06
今天小编就为大家分享一篇浅谈angularJS2中的界面跳转方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
AngularJs是一个不错的用于开发SPA应用（单页Web应用）的框架。通过本文给大家介绍angularjs基础教程，需要的朋友要求学习吧2016-04-04
这篇文章主要为大家详细介绍了AngularJS实现表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
最新评论