脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 的输入验证是一个强大的功能,可以帮助开发者确保用户输入的数据是准确和完整的,这篇文章主要介绍了AngularJS 输入验证,需要的朋友可以参考下
    2024-07-07
  • AngularJS标签页tab选项卡切换功能经典实例详解

    AngularJS标签页tab选项卡切换功能经典实例详解

    这篇文章主要介绍了AngularJS实现标签页tab选项卡功能,结合实例形式总结分析了各种常用的tab选项卡切换操作实现技巧与相关操作注意事项,需要的朋友可以参考下
    2018-05-05
  • angular 实时监听input框value值的变化触发函数方法

    angular 实时监听input框value值的变化触发函数方法

    今天小编就为大家分享一篇angular 实时监听input框value值的变化触发函数方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • angularJS1 url中携带参数的获取方法

    angularJS1 url中携带参数的获取方法

    今天小编就为大家分享一篇angularJS1 url中携带参数的获取方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • Angular浏览器插件Batarang介绍及使用

    Angular浏览器插件Batarang介绍及使用

    本篇文章主要介绍了Angular浏览器插件Batarang介绍及使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • Angular2中Bootstrap界面库ng-bootstrap详解

    Angular2中Bootstrap界面库ng-bootstrap详解

    不知道大家有没有留意，最近angular-ui团队终于正式发布了基于 Angular2的Bootstrap界面库ng-bootstrap ，之前工作中一直在用 AngularJS 1.x 的UI Bootstrap ， 因此对这个ng-bootstrap 也是很感兴趣，所以第一时间进行试用。这篇文章就给大家详细介绍下ng-bootstrap。
    2016-10-10
  • AngularJS开发教程之控制器之间的通信方法分析

    AngularJS开发教程之控制器之间的通信方法分析

    这篇文章主要介绍了AngularJS开发教程之控制器之间的通信方法,结合实例形式较为详细的分析了AngularJS控制器之间通信的三种常用方式及相关使用技巧,需要的朋友可以参考下
    2016-12-12
  • ANGULARJS中用NG-BIND指令实现单向绑定的例子

    ANGULARJS中用NG-BIND指令实现单向绑定的例子

    这篇文章主要介绍了ANGULARJS中用NG-BIND指令实现单向绑定的例子,本文简单介绍AngularJS框架后,用一个实例演示{{}}插值法和ng-bind指令的使用,需要的朋友可以参考下
    2014-12-12
  • 详解Angularjs 自定义指令中的数据绑定

    详解Angularjs 自定义指令中的数据绑定

    这篇文章主要介绍了Angularjs 自定义指令中的数据绑定，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • AngularJS通过$sce输出html的方法

    AngularJS通过$sce输出html的方法

    不知道大家有没有发现在用AngularJS作为前端搭建个人博客的时候，发现用AngularJs输出html的时候，浏览器并不解析这些html标签，这里我们需要其显示angular输出的html能被浏览器解析怎么办呢？不知道Angularjs如何实现这种功能的通过这篇文章来看看吧。
    2016-09-09

最新评论