编程 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的类型简单说明

Sep 03 Javascript

js自动闭合html标签(自动补全html标记)

Oct 04 Javascript

jQuery easyui datagrid动态查询数据实例讲解

Feb 26 Javascript

javascript显示系统当前时间代码

Dec 29 Javascript

jquery仿京东商品放大浏览页面

Jun 06 jQuery

分享Bootstrap简单表格、表单、登录页面

Aug 04 Javascript

简单介绍react redux的中间件的使用

Apr 06 Javascript

JS多个异步请求按顺序执行next实现解析

Sep 16 Javascript

详解vue中多个有顺序要求的异步操作处理

Oct 29 Javascript

卸载vue2.0并升级vue_cli3.0的实例讲解

Feb 16 Javascript

js实现查询商品案例

Jul 22 Javascript

vue props default Array或是Object的正确写法说明

Jul 30 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从数组中随机抽取一些元素的代码

2012/11/05 PHP

PHP中数组的分组排序实例

2014/06/01 PHP

在laravel中实现事务回滚的方法

2019/10/10 PHP

yii框架数据库关联查询操作示例

2019/10/14 PHP

PHP字符串与数组处理函数用法小结

2020/01/07 PHP

JavaScript中Array 对象相关的几个方法

2006/12/22 Javascript

原型方法的不同写法居然会影响调试的解决方法

2007/03/08 Javascript

jquery 事件冒泡的介绍以及如何阻止事件冒泡

2012/12/25 Javascript

FireBug 调试JS入门教程如何调试JS

2013/12/23 Javascript

使用js画图之饼图

2015/01/12 Javascript

js+cookies实现悬浮购物车的方法

2015/05/25 Javascript

jQuery实现html表格动态添加新行的方法

2015/05/28 Javascript

老生常谈js动态添加事件--- 事件委托

2016/07/19 Javascript

JQuery中Ajax的操作完整例子

2017/03/07 Javascript

JavaScript 基础表单验证示例(纯Js实现)

2017/07/20 Javascript

微信小程序实现刷脸登录

2018/05/25 Javascript

node实现分片下载的示例代码

2018/10/17 Javascript

详解js中let与var声明变量的区别

2020/04/05 Javascript

Jquery 动态添加元素并添加点击事件实现过程解析

2019/10/12 jQuery

Vue中keep-alive的两种应用方式

2020/07/15 Javascript

ES6中的类（Class）示例详解

2020/12/09 Javascript

Python中的Numpy入门教程

2014/04/26 Python

Python本地与全局命名空间用法实例

2015/06/16 Python

使用Python保存网页上的图片或者保存页面为截图

2016/03/05 Python

基于python实现高速视频传输程序

2019/05/05 Python

python 中如何获取列表的索引

2019/07/02 Python

Django框架安装方法图文详解

2019/11/04 Python

Python控制台输出时刷新当前行内容而不是输出新行的实现

2020/02/21 Python

Lee牛仔裤澳大利亚官网：美国著名牛仔裤品牌

2017/09/02 全球购物

红旗团支部事迹材料

2014/01/27 职场文书

项目施工员岗位职责

2014/03/09 职场文书

意外死亡赔偿协议书

2014/10/14 职场文书

青涩记忆观后感

2015/06/18 职场文书

立秋之描写立秋的作文（五年级）

2019/08/08 职场文书

win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法

2022/04/08 数码科技

python图像处理 PIL Image操作实例

2022/04/09 Python