正确使用ng-if和ng-show
在使用bootstrap中,我们会经常用到按钮组,也就是btn-group,如果仔细观察的话,会发现一个按钮组的第一个和最后一个按钮分别是有圆角的,如下图:
但是中间的按钮是没有圆角的,这样显得比较美观。
在结合angular使用过程中,有时候需要根据一些条件来隐藏掉一些按钮,当隐藏第一个或最后一个按钮时,会出现一些小问题。
代码:
<div class="row" ng-controller='myCtrl'>
<div class="col-lg-offset-1">
<div class="btn-group">
<button class='btn btn-primary'>button1</button>
<button class='btn btn-primary'>button2</button>
<button class='btn btn-primary' ng-show='false'>button3</button>
</div>
</div>
</div>
效果如图:
我们发现button2的圆角不见了,这和我们预期的效果不一致。
问题是由ng-show引起的,而我们知道ng-show只是改变元素的display属性,所以我们把这个ng-show='false'改成 style='display:none' 的话也会有这个圆角消失的效果。
那么我们应该怎么做,才会让它显示圆角呢?
如果我们想要达到显示圆角的效果,那么我们应该用ng-if ,只需要将代码中的ng-show='false' 改成ng-if='false' 即可。
原因是:ng-if会根据表达式的值来决定当前这个DOM元素的创建与销毁。当表达式为返回true时,创建,反之,则销毁。销毁就意味着这个DOM元素从页面中删除了。
效果如图:
圆角显示了,证明button3已经从页面中删除了。
再进一步,我们打开开发者工具也可以发现这个DOM元素确实已经不存在了:
正确使用ng-if和ng-show的更多相关文章
- 在库中使用schematics——ng add与ng update
起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...
- Angular6之ng build | ng build --aot | ng build --prod 差异
由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...
- Part 14 ng hide and ng show in AngularJS
ng-hide and ng-show directives are used to control the visibility of the HTML elements. Let us under ...
- angular 2 - 001 ng cli的安装和使用
angular cli 创建项目和组件 ng new my-app --skip-install cd my-app cnpm install ng serve localhost:4200 angu ...
- Angular 中后台前端解决方案 - Ng Alain 介绍
背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
- How to Pronounce the Letters NG – No Hard G
How to Pronounce the Letters NG – No Hard G Share Tweet Share Most of the time when you see the lett ...
- angular2 ng build --prod 报错:Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'
调试页面 ng serve 正常 ng build 也正常 ng build --prod 异常:Module not found: Error: Can't resolve './$$_gendir ...
- ng 构建
1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...
- Flume NG高可用集群搭建详解
.Flume NG简述 Flume NG是一个分布式,高可用,可靠的系统,它能将不同的海量数据收集,移动并存储到一个数据存储系统中.轻量,配置简单,适用于各种日志收集,并支持 Failover和负载均 ...
- FLUME NG的基本架构
Flume简介 Flume 是一个cloudera提供的 高可用高可靠,分布式的海量日志收集聚合传输系统.原名是 Flume OG (original generation),但随着 FLume 功能 ...
随机推荐
- HDU-1257 导弹拦截系统 http://acm.hdu.edu.cn/showproblem.php?pid=1257
Problem Description 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高 ...
- Linux编译源码的方式安装Qt4开发环境(基于Ubuntu系统)
1.到官网http://qt-project.org/downloads或者ftp://ftp.qt-project.org/上下载Qt的源码包,要安装当然要先有源码咯,我下载的是qt-everywh ...
- 【003:switch 不加 break的结果
#include <stdio.h> int main(){ char ch = 's'; switch(ch){ case 'a':{ printf("aaaaa") ...
- 启动Tomcat服务器报错
启动Tomcat服务器报错: Several ports (8005, 8080, 8009) required by Tomcat v5.5 Server at localhost are alre ...
- HTML5&CSS3练习笔记(一)
属性选择器的用法 格式:[属性/^/*/$=值] 1.[attr=val] 匹配指定值的元素 <div> <div id="section1"> 完全匹配元 ...
- 安卓版App开发心得
从2016年4月到6月主要做的工作是网站的开发,而6月到现在2016年8月初,主要做的工作是Android和IOS两种App的开发,又以Android为主. 将这段时间的Android开发心得记录如下 ...
- robots.txt文件没错,为何总提示封禁
大家好,我的robots.txt文件没错,为何百度总提示封禁,哪位高人帮我看看原因,在此谢过. 我的站点www.haokda.com,robots.txt如下: ## robots.txt for P ...
- 108 vpn iptables
[root@fge108 webapps]# iptables -t nat -A POSTROUTING -s 192.168.10.0/24 -j SNAT --to-source 47.88.1 ...
- linux6.*无法正常启动has进程解决方案
1. 数据库安装成功之后:发现ohasd进程存在异常:[root@oracle234 ~]# su - grid[grid@oracle234 ~]$ ps -ef| grep ohasdgrid ...
- Oracle Grid Infrastructure安装部署文档
1. 部署环境步骤 1.1 软件环境 操作系统: CentOS release 6.5 oracle安装包: linux.x64_11gR2_grid.zip linux.x64_11gR2_data ...