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

AngularJS基础 ng-hide 指令用法及示例代码

 更新时间：2016年08月01日 15:21:38   投稿：lqh  
本文主要介绍AngularJS ng-hide 指令,这里整理了ng-hide指令的基础资料,并附实例代码,有兴趣的小伙伴参考下

AngularJS ng-hide 指令

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 ng-app="">

隐藏 HTML: <input type="checkbox" ng-model="myVar">

<div ng-hide="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
</div>

</body>
</html>

定义和用法

ng-hide 指令在表达式为 true 时隐藏 HTML 元素。

ng-hide 是 AngularJS 的预定义类，设置元素的 display 为 none。

语法

<element ng-hide="expression"></element>

作为 CSS 类使用:

<element class="ng-hide"></element>

所有的 HTML 元素都支持该指令。

参数值

值 描述
expression 表达式如果返回 true 则隐藏元素。

以上就是AngularJS ng-hide指令的基本知识整理，后续继续补充。

您可能感兴趣的文章:

相关文章

  • 创建你的第一个AngularJS应用的方法

    创建你的第一个AngularJS应用的方法

    这篇文章主要介绍了创建你的第一个AngularJS应用的方法,AngularJS是一个非常具有人气的JavaScript框架,需要的朋友可以参考下
    2015-06-06
  • Angular.js 4.x中表单Template-Driven Forms详解

    Angular.js 4.x中表单Template-Driven Forms详解

    Angular 4.x 中有两种表单，一种是Template-Driven Forms - 模板驱动式表单，另外一种是Reactive Forms - 响应式表单 ，下面这篇文章主要给大家介绍了Angular.js 4.x中表单Template-Driven Forms的相关资料，需要的朋友可以参考学习，下面来一起看看吧。
    2017-04-04
  • 深入理解angular2启动项目步骤

    深入理解angular2启动项目步骤

    本篇文章主要介绍了深入理解angular2启动步骤 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • AngularJS双向绑定和依赖反转实例详解

    AngularJS双向绑定和依赖反转实例详解

    这篇文章主要介绍了AngularJS双向绑定和依赖反转实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • Angular封装搜索框组件操作示例

    Angular封装搜索框组件操作示例

    这篇文章主要介绍了Angular封装搜索框组件操作,结合实例形式分析了基于Angular组件库实现搜索功能的封装操作相关实现步骤与注意事项,需要的朋友可以参考下
    2019-04-04
  • Angular8 实现table表格表头固定效果

    Angular8 实现table表格表头固定效果

    这篇文章主要介绍了Angular8 实现table表格表头固定效果，表头固定，内部实现滚动条效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • AngularJS中$http使用的简单介绍

    AngularJS中$http使用的简单介绍

    在AngularJS中主要使用$http服务与远程http服务器交互，本篇文章主要介绍了AngularJS中$http使用的简单介绍，非常具有实用价值，需要的朋友可以参考下。
    2017-03-03
  • Angular中的请求拦截的方法

    Angular中的请求拦截的方法

    我们的接口是单独编写的处理的，在实际的开发项目中，有众多的接口，有些需要登陆凭证，有些不需要。一个一个接口处理不妥，我们是否可以考虑对请求进行拦截封装，感兴趣的可以了解一下
    2022-04-04
  • 详谈Angular路由与Nodejs路由的区别

    详谈Angular路由与Nodejs路由的区别

    下面小编就为大家带来一篇详谈Angular路由与Nodejs路由的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • AngularJS使用ng-inlude指令加载页面失败的原因与解决方法

    AngularJS使用ng-inlude指令加载页面失败的原因与解决方法

    这篇文章主要介绍了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法,对比不同浏览器错误提示分析了加载失败的原因及通过http访问的解决方法,需要的朋友可以参考下
    2017-01-01

最新评论