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

jQuery 常见学习网站与参考书

Nov 09 Javascript

javascript options属性集合操作代码

Dec 28 Javascript

我的javascript 函数链之演变

Apr 07 Javascript

javascript 日期时间转换的方法

Feb 21 Javascript

jquery中cookie用法实例详解(获取,存储,删除等)

Jan 04 Javascript

原生JS实现网络彩票投注效果

Sep 25 Javascript

Angular ng-repeat指令实例以及扩展部分

Dec 26 Javascript

jQuery模拟窗口抖动效果

Mar 15 Javascript

基于Bootstrap的标签页组件及bootstrap-tab使用说明

Jul 25 Javascript

微信小程序本地图片按照屏幕尺寸处理

Aug 04 Javascript

一步步教你利用Canvas对图片进行处理

Sep 19 Javascript

Node.js原生api搭建web服务器的方法步骤

Feb 15 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学习笔记 php中面向对象三大特性之一[封装性]的应用

2011/06/13 PHP

ThinkPHP模板替换与系统常量及应用实例教程

2014/08/22 PHP

thinkphp中html:list标签传递多个参数实例

2014/10/30 PHP

PHP的引用详解

2015/02/22 PHP

jquery tab插件制作实现代码

2010/06/22 Javascript

jQuery 1.5 源码解读面向中高阶JSER

2011/04/05 Javascript

JS 获取浏览器和屏幕宽高等信息的实现思路及代码

2013/07/31 Javascript

javascript操作html控件实例(javascript添加html)

2013/12/02 Javascript

jQuery插件Validate实现自定义表单验证

2016/01/18 Javascript

JavaScript html5 canvas绘制时钟效果(二)

2016/03/27 Javascript

JS封装的自动创建表格的实现代码

2016/06/15 Javascript

Vue + Webpack + Vue-loader学习教程之功能介绍篇

2017/03/14 Javascript

JS ES6中setTimeout函数的执行上下文示例

2017/04/27 Javascript

bootstrap table表格客户端分页实例

2017/08/07 Javascript

基于js文件加载优化(详解)

2018/01/03 Javascript

JavaScript图片处理与合成总结

2018/03/04 Javascript

element-ui表格数据转换的示例代码

2018/08/24 Javascript

js中innerText/textContent和innerHTML与target和currentTarget的区别

2019/01/21 Javascript

js实现网页版贪吃蛇游戏

2020/02/22 Javascript

基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析

2020/12/30 Vue.js

[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17

2018/08/18 DOTA

德国团购网站：Groupon德国

2018/03/13 全球购物

英国快时尚女装购物网站：PrettyLittleThing

2018/08/15 全球购物

英国领先的票务代理商之一：The Ticket Factory

2019/02/09 全球购物

澳大利亚优质的家居用品和生活方式公司：Bed Bath N’ Table

2019/04/16 全球购物

机关门卫岗位职责

2013/12/30 职场文书

教师先进工作者事迹材料

2014/05/01 职场文书

贷款委托书怎么写

2014/08/02 职场文书

2015年春节标语口号

2014/12/09 职场文书

2015年党员个人剖析材料

2014/12/18 职场文书

社区党建工作总结2015

2015/05/13 职场文书

离婚协议书格式范本

2016/03/18 职场文书

详解分布式系统中如何用python实现Paxos

2021/05/18 Python

Python包argparse模块常用方法

2021/06/04 Python

新手初学Java List 接口

2021/07/07 Java/Android

解决 redis 无法远程连接

2022/05/15 Redis