在使用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元素确实已经不存在了:

原文链接:http://www.cnblogs.com/iceseal/p/4077417.html

 

ng-show,ng-if区别的更多相关文章

  1. Angular6之ng build | ng build --aot | ng build --prod 差异

    由于写了大半年的项目终于要告一段落并且即将进行第二阶段优化开发,emmm 基础版本已经二十多个模块了,必不可少的优化是很重要的,尽管项目上使用多层嵌套懒加载,但是在首屏加载的时候,任然很慢啊,因为一直 ...

  2. Flume NG Getting Started(Flume NG 新手入门指南)

    Flume NG Getting Started(Flume NG 新手入门指南)翻译 新手入门 Flume NG是什么? 有什么改变? 获得Flume NG 从源码构建 配置 flume-ng全局选 ...

  3. ng环境搭建步骤

    1,安装node node -v查看版本号 2,安装淘宝镜像 npm config set registry https://registry.npm.taobao.org 3,安装cnpm npm ...

  4. 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 ...

  5. [Angular 6] 初学angular,环境全部最新,[ ng serve ] 不能启动,卡在 95% 不动 => 解决方案

    2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.js ...

  6. ng 构建

    1.ng 构建和部署 构建:编译和合并ng build 部署:复制dist里面的文件到服务器 2.多环境的支持 配置环境package.json "scripts": { &quo ...

  7. Angular CLI 启动 版本ng 4

    npm install -g angular-cli ng -v ng new project_name cd project_name ng serve 浏览器打开输入 localhost:4200

  8. org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter与org.apache.struts.dispatcher.FilterDispatcher是什么区别?

    org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter与org.apache.struts.dispatcher.F ...

  9. Flume OG 与 Flume NG 的区别

    1.Flume OG:Flume original generation 即Flume 0.9.x版本    Flume NG:Flume next generation ,即Flume 1.x版本 ...

  10. java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter /struts2.1.3以前版本和之后版本区别/新版Eclipse找不到Java EE Module Dependencies选项

    严重: Exception starting filter struts2java.lang.ClassNotFoundException: org.apache.struts2.dispatcher ...

随机推荐

  1. 仿腾讯课堂固定滚动列表ReactNative组件

    前言 由于业务需要做成类似腾讯课堂课程详情滚动的效果,考虑到后面有可能有新的呈现方式,RN提供的组件没有这种滚动控件,不如自己封装,其实去年已经写了一篇但是写的比较乱,周末花了点时间重写梳理下做的东西 ...

  2. BZOJ:4530: [Bjoi2014]大融合

    4530: [Bjoi2014]大融合 拿这题作为lct子树查询的练手.本来以为这会是一个大知识点,结果好像只是一个小技巧? 多维护一个虚边连接着的子树大小即可. #include<cstdio ...

  3. bfs学习

    今天做到了bfs的练习,顺便写下心得... bfs能解决搜索和最短路径的问题. 下面是学习心得: typedef struct point //定义点 { int x; int y; }P; bfs( ...

  4. Win10没有以太网图标如何找回?以太网适配器不见了怎么恢复?

    Win10以太网适配器不见了怎么恢复?以太网其实就是Win7系统中常说的"本地连接"假若用户发现网络适配器中的以太网适配器图标不见了,可以在设备管理器中添加一些这类适配器,具体过程 ...

  5. 面试(2)-java-se-HashSet和TreeSet12

    Set是java中一个不包含重复元素的collection.更正式地说,set 不包含满足 e1.equals(e2) 的元素对 e1 和 e2,并且最多包含一个 null 元素.正如其名称所暗示的, ...

  6. UE4 Xml读写

    UE4自带一个XmlParser,可以很方便的实现Xml的读写. 1,在PublicDependencyModuleNames.AddRange中添加XmlParser. 2,include XmlP ...

  7. 算法-java代码实现快速排序

    快速排序 对于一个int数组,请编写一个快速排序算法,对数组元素排序. 给定一个int数组A及数组的大小n,请返回排序后的数组. 测试样例: [1,2,3,5,2,3],6 [1,2,2,3,3,5] ...

  8. 【开发技术】Get请求和Post请求区别

    a.Get请求是通过URL请求来提交表单数据的:Post是通过HTTP中的POST机制将表单中的数据提交到Action所定制的程序,如果有附件需要用Post方式. b.Get适用于传输数据量小于1K数 ...

  9. Asp.net Core 跨域配置

    一般情况WebApi都是跨域请求,没有设置跨域一般会报以下错误 No 'Access-Control-Allow-Origin' header is present on the requested ...

  10. EL表达式得不到后台传过来的值

    两种jsp获得action传过来的值 第一种: <s:iterator value="#pagination.datas" var="supplier" ...