AngularJs ngIf、ngSwitch、ngHide/ngShow

在组合这些ng指令写到一篇文章里的时候，基本是有规则的，本兽会将功能相似相近的一类整合到一篇文章，方便理解和记忆。

这篇的三个指令也都是对DOM元素的操作，页面上显示/隐藏的判断，添加/移除的判断。

ngIf

ngIf指令会根据指定的表达式返回的boolean类型值对该元素做添加到/移除出Dom树的操作。

格式：ng-if=“value”

value：表达式返回结果为boolean类型。

使用代码：

  <input type="button" value="show/hide" ng-click="show = !show;" /><div ng-if="show">Hello World</div>

这里做了个对Hello World 所在的div的显示/隐藏效果。但是如果你打开浏览器开发工具去审查元素，会发现这个div是被移除和添加的，只留下一个注释“”在div所在的地方。这个需要和下面的ngShow/ngHide做个区分。也就是说这个指令对DOM的操作是移除出/添加进DOM树了。

ngSwitch

ngSwitch指令可以根据表达式的结果在模板上按条件切换DOM结构。元素内使用ngSwitch而没使用ngSwitchWhen或者ngSwitchDefault指令的将会被保存在模板中。

格式：ng-switch on=“expression” ng-switch-default ng-switch-when=“value”

expression: 表达式，返回判断的条件是否成立的boolean值。

value：设置的条件

使用代码：

  <div ng-app="Demo" ng-controller="testCtrl as ctrl"><select ng-model="ctrl.tpl" ng-options="i for i in ctrl.select"><option value="0">请选择模板</option></select><div ng-switch on="ctrl.tpl"><p ng-switch-default>tpl-one</p><p ng-switch-when="tpl-two">tpl-two</p><p ng-switch-when="tpl-three">tpl-three</p></div></div>

  (function () {angular.module("Demo", []).controller("testCtrl", testCtrl);function testCtrl() {this.select = ["tpl-one", "tpl-two","tpl-three" ];this.tpl = this.select[0];};}());

ngSwitch根据表达式的成立与否添加对应的内容到写好的HTML位置，而这个位置当表达式为false时也是个注释就像：“”。这是第二个模板绑定的位置，当表达式满足第二个模板的条件，那么这里就会被第二个模板的HTML代替并显示到页面。

ngHide/ngShow

NgHide/ngShow指令显示或隐藏指定的THML元素。元素的显示隐藏是根据元素上ng-hide的css样式添加删除实现的。

格式：ng-hide=”value” ng-show=”value”

value：表达式结果为boolean类型。

使用代码：

   <input type="button" value="show/hide" ng-click="show = !show;" /><div ng-show="show">Hello</div><div ng-hide="show">World</div>

ngShow和ngHide相反。这里把ng-hide的css样式写在下面吧：

   .ng-hide {/* this is just another form of hiding an element */display: block!important;position: absolute;top: -9999px;left: -9999px;}

转载于:https://www.cnblogs.com/ys-ys/p/4965139.html

AngularJs ngIf、ngSwitch、ngHide/ngShow相关推荐

Angular 图片、条件判断（*ngIf、[ngSwitch]、属性[ngClass]、[ngStyle]）
1. Angular 图片.条件判断(*ngIf.[ngSwitch].属性[ngClass].[ngStyle]) 1.1 图片 1.1.1 本地图片: 我们在assets目录下面新建images文 ...
Angular中数据循环ngFor、条件判断ngIf、ngSwitch、执行事件(click)、表单事件(keyup)、ngClass、ngStyle的使用
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的？
大家好,我是IT修真院郑州分院第七期的学员冯亚超,一枚正直纯洁善良的WEB程序员今天给大家分享一下,题目angular js 常用指令ng-if.ng-class.ng-option.ng-valu ...
使用 Node.js、Express、AngularJS 和 MongoDB 构建一个Web程序
为什么80%的码农都做不了架构师?>>> 使用 Node.js.Express.AngularJS 和 MongoDB 构建一个实时问卷调查应用程序 2014 年 3 月 20 ...
AngularJS 指令之 ng-hide/ng-show
用途 ng-hide/ng-show属性用来控制页面内元素的显示或隐藏. ng-hide条件为true时,隐藏所在元素:false,则显示所在元素. ng-show正好相反.true时,显示所在元素: ...
Web前端学习笔记——AngularJS之简介、起步、特性
目录 Angular 简介 Angular 是什么特性发展历史起源困境 Angular 2 横空出世 ng2 相比 ng1 现状那我为什么要学习使用 Angular ? 学习 Angular ...
在 Azure 中的 Linux VM 上创建 MongoDB、Express、AngularJS 和 Node.js (MEAN) 堆栈
本教程介绍如何在 Azure 中的 Linux VM 上实现 MongoDB.Express.AngularJS 和 Node.js (MEAN) 堆栈. 通过创建的 MEAN 堆栈,可以在数据库中添 ...
Angular2、AngularJS、React、vue.js过去一年的Google趋势分析
Angular2.AngularJS.React.vue.js过去一年的Google.百度趋势分析最近在学angular,但是在国内的话似乎是vuejs比较火,百度指数只有国内数据分析,于是翻了下墙 ...
web前端工程师面试题手册（2022最新版基础、核心、进阶）
目录 1.前端基础 1.1 | HTTP/HTML/浏览器 • 说一下 http 和 https • tcp 三次握手,一句话概括 • TCP 和 UDP 的区别 • WebSocket 的实现和应用 ...

AngularJs ngIf、ngSwitch、ngHide/ngShow

AngularJs ngIf、ngSwitch、ngHide/ngShow相关推荐

最新文章

热门文章