脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS HTML DOM

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 实例

<!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动态添加数据并删除的实例

    AngularJS动态添加数据并删除的实例

    下面小编就为大家分享一篇AngularJS动态添加数据并删除的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 利用Angularjs中模块ui-route管理状态的方法

    利用Angularjs中模块ui-route管理状态的方法

    这篇文章主要给大家介绍了如何用Angularjs中的模板ui-route来管理状态的方法,文中通过示例代码介绍的很详细，相信对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友可以一起来学习学习。
    2016-12-12
  • Angular4.0动画操作实例详解

    Angular4.0动画操作实例详解

    这篇文章主要介绍了Angular4.0动画操作,结合实例形式详细分析了Angular4.0动画的原理、定义及使用等相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • angular2路由之routerLinkActive指令【推荐】

    angular2路由之routerLinkActive指令【推荐】

    这篇文章主要介绍了angular2路由之routerLinkActive指令的相关资料,需要的朋友可以参考下
    2018-05-05
  • AngularJS基础 ng-disabled 指令详解及简单示例

    AngularJS基础 ng-disabled 指令详解及简单示例

    本文主要介绍AngularJS ng-disabled 指令,这里帮大家整理了ng-disabled指令的基础指令,并附示例代码,有需要的小伙伴参考下
    2016-08-08
  • 使用Angular9和TypeScript开发RPG游戏的方法

    使用Angular9和TypeScript开发RPG游戏的方法

    这篇文章主要介绍了使用Angular9和TypeScript开发RPG游戏的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Angular中的interceptors拦截器

    Angular中的interceptors拦截器

    这篇文章主要介绍了Angular中的interceptors拦截器,需要的朋友可以参考下
    2017-06-06
  • 对angular 监控数据模型变化的事件方法$watch详解

    对angular 监控数据模型变化的事件方法$watch详解

    今天小编就为大家分享一篇对angular 监控数据模型变化的事件方法$watch详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • 深入浅析Angular SSR

    深入浅析Angular SSR

    Angular Universal 主要关注将 Angular App 如何进行服务端渲染和生成静态 HTML，对于用户交互复杂的 SPA 并不推荐使用 SSR，本文是在 Angular 14 环境中完成，有些内容对于新的 Angular 版本可能并不适用，感兴趣的朋友一起通过本文学习
    2022-11-11
  • 给angular加上动画效遇到的问题总结

    给angular加上动画效遇到的问题总结

    本文给大家总结了一下在angular中给ng-repeat列表加上动画效果时所遇到的问题及解决方法，推荐给大家，希望大家能够喜欢。
    2016-02-02

最新评论