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

AngularJS基础 ng-if 指令用法

 更新时间：2016年08月01日 15:43:56   投稿：lqh  
本文主要介绍了AngularJS ng-if 指令,在这里整理了一些ng-if 指令的基础资料,并有实例代码,有需要的同学可以参考下

AngularJS ng-if 指令

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" ng-init="myVar = true">

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

<p>当复选框取消选中时 DIV 元素将移除。</p>
<p>当重新选中复选框，DIV 元素会重新显示。</p>

</body>
</html>

定义和用法

ng-if 指令用于在表达式为 false 时移除 HTML 元素。

如果 if 语句执行的结果为 true，会添加移除元素，并显示。

ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

语法

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

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

参数值

 

值 描述
expression 如果表达式返回 false 则会移除整个元素，如果为 true，则会添加元素。

 以上就是对AngularJS基础知识的整理，后续继续补充，谢谢大家的支持。

您可能感兴趣的文章:

相关文章

  • AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

    AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】

    这篇文章主要介绍了AngularJS实现的鼠标拖动画矩形框,涉及基于AngularJS的事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-05-05
  • Angular实现较为复杂的表格过滤，删除功能示例

    Angular实现较为复杂的表格过滤，删除功能示例

    这篇文章主要介绍了Angular实现较为复杂的表格过滤，删除功能,结合实例形式分析了AngularJS针对表格的排序、查询匹配、页面元素属性动态修改等相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • angular 数据绑定之[]和{{}}的区别

    angular 数据绑定之[]和{{}}的区别

    这篇文章主要介绍了angular 数据绑定之[]和{{}}的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Angular 多级路由实现登录页面跳转(小白教程)

    Angular 多级路由实现登录页面跳转(小白教程)

    这篇文章主要介绍了Angular 多级路由实现登录页面跳转(小白教程)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • AngularJS中的缓存使用

    AngularJS中的缓存使用

    一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。这篇文章主要介绍了AngularJS中的缓存使用，有兴趣的可以了解一下。
    2017-01-01
  • angularjs实现table表格td单元格单击变输入框/可编辑状态示例

    angularjs实现table表格td单元格单击变输入框/可编辑状态示例

    这篇文章主要介绍了angularjs实现table表格td单元格单击变输入框/可编辑状态,涉及AngularJS事件响应及页面table元素属性动态操作相关实现技巧,需要的朋友可以参考下
    2019-02-02
  • AngularJS+Node.js实现在线聊天室

    AngularJS+Node.js实现在线聊天室

    随着互联网和信息技术的发展，如何快速构建高效、强大的动态网站成为很多人研究的热点。该文将结合AngularJS和Node.js构建一个在线聊天室，体现AngularJs和Node.js整合的优点。
    2015-08-08
  • Angular封装WangEditor富文本组件的方法

    Angular封装WangEditor富文本组件的方法

    这篇文章主要介绍了Angular封装WangEditor富文本组件,得益于Angular的强大，封装WangEditor组件非常简单，需要的朋友可以参考下
    2021-07-07
  • 详解AngularJS中ng-src指令的使用

    详解AngularJS中ng-src指令的使用

    这篇文章给大家详细介绍了AngularJS中ng-src指令的使用，对大家学习AngularJS具有一定参考价值，有需要的朋友们可以参考借鉴。
    2016-09-09
  • AngularJS实现单独作用域内的数据操作

    AngularJS实现单独作用域内的数据操作

    这篇文章给大家介绍了利用AngularJs如何实现ng-repeat内各个小的子作用域单独数据绑定。有需要的小伙伴们可以参考借鉴，下面来一起看看吧。
    2016-09-09

最新评论