编程 Javascript

AngularJS基础 ng-if 指令用法

Posted in Javascript onAugust 01, 2016

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 中移除元素。

语法

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

参数值

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

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

AngularJS基础 ng-if 指令用法

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

[原创]用javascript实现检测指定目录是否存在的方法

Jan 12 Javascript

基于jquery的一个简单的脚本验证插件

Apr 05 Javascript

Whatever:hover 无需javascript让IE支持丰富伪类

Jun 29 Javascript

jQuery EasyUI API 中文文档 - ComboBox组合框

Oct 07 Javascript

JavaScript中的函数模式详解

Feb 11 Javascript

多个jQuery版本共存的处理方案

Mar 17 Javascript

jQuery控制div实现随滚动条滚动效果

Jun 07 Javascript

Angular-Touch库用法示例

Dec 22 Javascript

Jquery中attr与prop的区别详解

May 27 jQuery

seajs中模块依赖的加载处理实例分析

Oct 10 Javascript

浅谈vue路径优化之resolve

Oct 13 Javascript

Vue Cli 3项目使用融云IM实现聊天功能的方法

Apr 19 Javascript

AngularJS控制器之间的数据共享及通信详解

Aug 01 #Javascript

BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面

Aug 01 #Javascript

AngularJS基础 ng-href 指令用法

Aug 01 #Javascript

jQuery实现点击行选中或取消CheckBox的方法

Aug 01 #Javascript

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

Aug 01 #Javascript

使用JS中的exec()方法构造正则表达式验证

Aug 01 #Javascript

javascript创建含数字字母的随机字符串方法总结

Aug 01 #Javascript

You might like

php遍历类中包含的所有元素的方法

2015/05/12 PHP

PHP截取发动短信内容的方法

2017/07/04 PHP

PHP基于GD库实现的生成图片缩略图函数示例

2017/07/05 PHP

PHP读取、解析eml文件及生成网页的方法示例

2017/09/04 PHP

Laravel6.0.4中将添加计划任务事件的方法步骤

2019/10/15 PHP

关于javascript中的typeof和instanceof介绍

2012/12/04 Javascript

Javascript表格翻页效果实现思路及代码

2013/08/23 Javascript

jquery判断至少有一个checkbox被选中的方法

2015/06/05 Javascript

javascript获取网页宽高方法汇总

2015/07/19 Javascript

基于jquery实现智能表单验证操作

2016/05/09 Javascript

全面解析Bootstrap中nav、collapse的使用方法

2016/05/22 Javascript

AngularJS过滤器详解及示例代码

2016/08/16 Javascript

JS 动态判断PC和手机浏览器实现代码

2016/09/21 Javascript

js实现的在线调色板功能完整实例

2016/12/21 Javascript

jQuery实现 RadioButton做必选校验功能

2017/06/15 jQuery

jQuery制作input提示内容（兼容IE8以上）

2017/07/05 jQuery

基于Vue2-Calendar改进的日历组件（含中文使用说明）

2019/04/14 Javascript

vue解决使用$http获取数据时报错的问题

2019/10/30 Javascript

jQuery实现简单飞机大战

2020/07/05 jQuery

vue 避免变量赋值后双向绑定的操作

2020/11/07 Javascript

JS相册图片抖动放大展示效果的示例代码

2021/01/29 Javascript

[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访

2021/03/11 DOTA

python自动格式化json文件的方法

2015/03/11 Python

python itchat实现微信好友头像拼接图的示例代码

2017/08/14 Python

Python批量提取PDF文件中文本的脚本

2018/03/14 Python

Django使用redis缓存服务器的实现代码示例

2019/04/28 Python

简单了解django缓存方式及配置

2019/07/19 Python

Pytorch maxpool的ceil_mode用法

2020/02/18 Python

python 控制台单行刷新,多行刷新实例

2020/02/19 Python

Pycharm配置PyQt5环境的教程

2020/04/02 Python

OLEDBConnection和SQLConnection有什么区别

2013/05/31 面试题

大四毕业生学习总结的自我评价

2013/10/31 职场文书

学生会主席竞聘书

2014/03/31 职场文书

党的群众路线教育实践活动个人整改方案

2014/10/25 职场文书

2016猴年开门红标语口号

2015/12/26 职场文书

mysql 8.0.24 安装配置方法图文教程

2021/05/12 MySQL