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是被移除和添加的,只留下一个注释“<!-- ngIf: show -->”在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时也是个注释就像:“<!-- ngSwitchWhen: tpl-two -->”。这是第二个模板绑定的位置,当表达式满足第二个模板的条件,那么这里就会被第二个模板的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;
}
AngularJs ngIf、ngSwitch、ngHide/ngShow的更多相关文章
- Angular - - ngIf、ngSwitch、ngHide/ngShow
在组合这些ng指令写到一篇文章里的时候,基本是有规则的,野兽把功能相似相近的一类大多会组合到一起,方便理解和记忆. 这篇的三个指令也都是对DOM元素的操作,页面上显示/隐藏的判断,添加/移除的判断. ...
- angularjs之ng-if、ng-show、ng-switch那些事
一.蓝瘦~香菇 经常在项目中使用ng-if和ng-show来处理一些简单的状态,今天碰到一个复杂的状态判断,不经让我想起ng-switch.第一次接触他的时候,我没怎么注意他,因为我直接把他当作其 ...
- AngularJS的学习--ng-show/ng-hide/ng-if和ng-switch
在Angular的原生指令中有这几个指令用来控制元素的展示与否,ng-show/ng-hide/ng-if和ng-switch. 在angular性能优化中,我们也常常会用到它. 我们看下他们的区别. ...
- angularjs ng-if ng-show ng-hide区别
在使用anularjs开发前端页面时,常常使用ng-show.ng-hide.ng-if功能来控制页面元素的显示或隐藏,那他们之间有什么不同呢? 实现原理方面:ng-show/ng-hide是通过修改 ...
- 前端MVC学习总结(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 前端MVC学习笔记(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- AngularJs:Service、Factory、Provider依赖注入使用与区别
本教程使用AngularJS版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ ...
- AngularJS 简介、指令、表达式
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...
- AngularJS:何时应该使用Directive、Controller、Service?【新手必看】
(这篇文章你们一定要看,尤其初学的人,好吗亲?) 大漠穷秋 译 AngularJS是一款非常强大的前端MVC框架.同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉.(译者注:老外真谦虚,我大天 ...
随机推荐
- c++ 指针(二)
函数指针 可以使用算法的地址传递给方法,传递之前要先完成以下工作 1.获取函数的地址 2.声明一个函数指针 3.使用函数指针来调用函数 1.获取函数的地址,只要使用函数名就可以 Fun2(Fun1); ...
- Theano1.1-安装
之前一直想弄theano,可是python不是很懂,在学习了一段时间之后开始安装theano.当然官网上的安装资料是全,可是也太繁琐了.这里介绍的是最简单,最方面的安装theano的方法.官网首页:h ...
- WPF 绑定枚举值
前台Xaml <ComboBox x:Name=" HorizontalAlignment="Left" Margin="5 0 0 0" Se ...
- windows 下 redis for php 配置
下载 redis,下载地址 https://github.com/dmajkic/redis/downloads,下载下来 zip 文件,解压,根据系统选择解压的文件夹(比如我的是 64bit). 我 ...
- PHP核心编程知识点
一.PHP基本语法 PHP标记:一共有四种,只推荐使用第一种 语句结束符:分号 注释:行注释(// #)和块注释(/* */),注释的规范 二.常见的输出语句 print echo var_du ...
- 准确率(Accuracy), 精确率(Precision), 召回率(Recall)和F1-Measure
yu Code 15 Comments 机器学习(ML),自然语言处理(NLP),信息检索(IR)等领域,评估(Evaluation)是一个必要的 工作,而其评价指标往往有如下几点:准确率(Accu ...
- jni的使用方法
我们可以通过jni来调用c/c++程序,C/C++一般会被作为动态库的形式来供java程序调用 环境 操作系统:Centos6.7 java: openjdk7 依赖包:java7-devel(yum ...
- Beta版本冲刺———第七天
会议照片: 项目燃尽图: 1.项目进展: 明天就验收了,今天做的是对项目的所有功能进行复查(由郭怡锋和洪大钊负责); 对于新增的功能:排行榜和撤销一步依然没有做出来.
- Java文件拷贝
package com.lxm.demos; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io. ...
- PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
通过curl_setopt()函数可以方便快捷的抓取网页(采集很方便),curl_setopt 是php的一个扩展库 使用条件:需要在php.ini 中配置开启.(PHP 4 >= 4.0.2) ...