AngularJS 入门教程之HTML DOM实例详解  更新时间:2016年07月28日 09:07:38   投稿:lqh   本文主要介绍AngularJS HTML DOM,这里帮大家整理了详细的资料,并附实例代码详细讲解,有需要的小伙伴可以参考下 AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled 指令 ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。 AngularJS 实例 点我! 按钮 {{ mySwitch }} 运行效果: 点我! 按钮 true 实例讲解: ng-disabled 指令绑定应用程序数据 “mySwitch” 到 HTML 的 disabled 属性。 ng-model 指令绑定 “mySwitch” 到 HTML input checkbox 元素的内容(value)。 如果 mySwitch 为true, 按钮将不可用: 点我! 如果 mySwitch 为false, 按钮则可用: 点我! ng-show 指令 ng-show 指令隐藏或显示一个 HTML 元素。 AngularJS 实例 我是可见的。 我是不可见的。 运行效果: 我是可见的。 ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。 你可以使用表达式来计算布尔值( true 或 false): AngularJS 实例 我是可见的。 运行结果: 我是可见的。 Note 在下一个章节中,我们将为大家更多通过点击按钮来隐藏 HTML 元素的实例。 ng-hide 指令 ng-hide 指令用于隐藏或显示 HTML 元素。 AngularJS 实例 我是不可见的。 我是可见的。 运行结果: 我是可见的。 以上就是对AngularJS HTML DOM 资料的整理,后续继续补充,希望能帮助编程AngularJS的朋友。 您可能感兴趣的文章: AngularJS中的DOM操作用法分析 详解angular中如何监控dom渲染完毕 AngularJS实现DOM元素的显示与隐藏功能 AngularJS HTML DOM详解及示例代码 Angular.JS通过指令操作DOM的方法 AngularJS HTML DOM 相关文章 Angular封装表单控件及思想总结 这篇文章主要给大家介绍了关于Angular封装表单控件及一些思想的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2019-12-12 js常用正则表达式集锦 这篇文章主要介绍了js常用正则表达式集锦,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2019-05-05 angular使用post、get向后台传参的问题实例 本篇文章主要介绍了angular使用post、get向后台传参的问题实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 angular基于ng-alain定义自己的select组件示例 这篇文章主要介绍了angular基于ng-alain定义自己的select组件示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-02-02 angular组件继承的实现方法 本篇文章主要介绍了angular组件继承的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-02-02 AngularJS框架的ng-app指令与自动加载实现方法分析 这篇文章主要介绍了AngularJS框架的ng-app指令与自动加载实现方法,结合实例形式分析了ng-app指令的功能及自动加载机制的实现技巧,需要的朋友可以参考下 2017-01-01 浅谈Angularjs link和compile的使用区别 下面小编就为大家带来一篇浅谈Angularjs link和compile的使用区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2016-10-10 angular4+百分比进度显示插件用法示例 这篇文章主要介绍了angular4+百分比进度显示插件用法,结合实例形式分析了Angular4安装及使用百分比进度显示插件相关步骤与操作技巧,需要的朋友可以参考下 2019-05-05 angular中使用Socket.io实例代码 本篇文章主要介绍了angular中使用Socket.io实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 AngularJS 面试题集锦 本文主要介绍AngularJS的面试题资料整理,这里整理了相关面试题的资料,帮助大家学习理解AngularJS的知识,有兴趣的小伙伴可以参考下 2016-09-09 最新评论

AngularJS HTML DOM

AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令。

ng-disabled 指令

ng-disabled 指令直接绑定应用程序数据到 HTML 的 disabled 属性。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">点我!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>按钮
</p>
<p>
{{ mySwitch }}
</p>
</div> 

</body>
</html>

运行效果:

按钮

true

实例讲解:

ng-disabled 指令绑定应用程序数据 “mySwitch” 到 HTML 的 disabled 属性。

ng-model 指令绑定 “mySwitch” 到 HTML input checkbox 元素的内容(value)。

如果 mySwitch 为true, 按钮将不可用:

<p>
<button disabled>点我!</button>
</p>

如果 mySwitch 为false, 按钮则可用:

<p>
<button>点我!</button>
</p>

ng-show 指令

ng-show 指令隐藏或显示一个 HTML 元素。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">

<p ng-show="true">我是可见的。</p>

<p ng-show="false">我是不可见的。</p>

</div> 

</body>
</html>

运行效果:

我是可见的。

ng-show 指令根据 value 的值来显示(隐藏)HTML 元素。

你可以使用表达式来计算布尔值( true 或 false):

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">我是可见的。</p>

</div>

</body>
</html>

运行结果:

我是可见的。

Note 在下一个章节中,我们将为大家更多通过点击按钮来隐藏 HTML 元素的实例。

ng-hide 指令

ng-hide 指令用于隐藏或显示 HTML 元素。

AngularJS 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">

<p ng-hide="true">我是不可见的。</p>

<p ng-hide="false">我是可见的。</p>

</div> 

</body>
</html>

运行结果:

我是可见的。

以上就是对AngularJS HTML DOM 资料的整理,后续继续补充,希望能帮助编程AngularJS的朋友。

您可能感兴趣的文章:

  • AngularJS中的DOM操作用法分析
  • 详解angular中如何监控dom渲染完毕
  • AngularJS实现DOM元素的显示与隐藏功能
  • AngularJS HTML DOM详解及示例代码
  • Angular.JS通过指令操作DOM的方法
张贴在3