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

2019-12-05,,,,

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基础 ng-if 指令用法
  • AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
  • AngularJS基础 ng-show 指令简单示例
  • ANGULARJS中用NG-BIND指令实现单向绑定的例子
  • angularjs自定义ng-model标签的属性
  • AngularJS学习笔记之ng-options指令
  • angularjs表格ng-table使用备忘录
  • Angular ng-repeat 对象和数组遍历实例
  • angularjs在ng-repeat中使用ng-model遇到的问题
  • Angular.js中ng-if、ng-show和ng-hide的区别介绍

《AngularJS基础 ng-hide 指令用法及示例代码.doc》

下载本文的Word格式文档,以方便收藏与打印。