编程 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 相关文章推荐

JS中用户登录系统的解决办法

Apr 15 Javascript

jquery.cookie() 方法的使用(读取、写入、删除)

Dec 05 Javascript

Javascript实现颜色rgb与16进制转换的方法

Apr 18 Javascript

javascript多行字符串的简单实现方式

May 04 Javascript

js实现的倒计时按钮实例

Jun 24 Javascript

JavaScript隐式类型转换

Mar 15 Javascript

jQuery代码性能优化的10种方法

Jun 21 Javascript

AngularJS动态绑定ng-options的ng-model实例代码

Jun 21 Javascript

AngularJS实现表格的增删改查（仅限前端）

Jul 04 Javascript

解决linux下node.js全局模块找不到的问题

May 15 Javascript

Vue-input框checkbox强制刷新问题

Apr 18 Javascript

JS箭头函数和常规函数之间的区别实例分析【 5 个区别】

May 27 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中使用Curl、socket、file_get_contents三种方法POST提交数据

2011/08/12 PHP

PHP不用递归实现无限分级的例子分享

2014/04/18 PHP

php读取csc文件并输出

2015/05/21 PHP

php中实现字符串翻转的方法

2017/02/22 PHP

php实现简单加入购物车功能

2017/03/07 PHP

PHP数字金额转换成中文大写显示

2019/01/05 PHP

php更新cookie内容的详细方法

2019/09/30 PHP

PHP连接SQL server数据库测试脚本运行实例

2020/08/24 PHP

JavaScript动态插入script的基本思路及实现函数

2013/11/11 Javascript

jquery中实现时间戳与日期相互转换

2016/04/12 Javascript

nodeJS实现路由功能实例代码

2017/06/08 NodeJs

jQuery实现动态控制页面元素的方法分析

2017/12/20 jQuery

简述JS控制台的使用

2018/07/15 Javascript

jQuery实现基本隐藏与显示效果的方法详解

2018/09/05 jQuery

解决vue-cli脚手架打包后vendor文件过大的问题

2018/09/27 Javascript

使用zrender.js绘制体温单效果

2019/10/31 Javascript

js实现登录拖拽窗口

2020/02/10 Javascript

使用Vue实现简单计算器

2020/02/25 Javascript

[01:00:14]DOTA2官方TI8总决赛纪录片真视界True Sight

2019/01/16 DOTA

Python 数据结构之队列的实现

2017/01/22 Python

Python中按值来获取指定的键

2019/03/04 Python

使用Python的Turtle库绘制森林的实例

2019/12/18 Python

使用PyTorch将文件夹下的图片分为训练集和验证集实例

2020/01/08 Python

编码转换，怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串

2014/01/07 面试题

如何高效率的查找一个月以内的数据

2012/04/15 面试题

大专生自荐信

2013/10/04 职场文书

工厂仓管员岗位职责

2014/01/01 职场文书

自我评价范文分享

2014/01/04 职场文书

运动会通讯稿300字

2014/02/02 职场文书

母亲节感恩寄语

2014/02/21 职场文书

大学第二课堂活动总结

2014/07/08 职场文书

庆祝儿童节标语

2014/10/09 职场文书

企业介绍信范文

2015/01/30 职场文书

厉行节约工作总结

2015/08/12 职场文书

中学团支部工作总结

2015/08/13 职场文书

《用字母表示数》教学反思

2016/02/17 职场文书