angular ng-show/ng-hide/ng-if

Angularjs 的这三个指令从实现效果上开是控制页面元素的显示和隐藏。

区别

指令 显示 隐藏
ng-show true false
ng-hide false true
ng-if true false

ng-show 和ng-hide

指令 取值 class 解释
ng-show true 按元素类型(块元素,行内元素)显示
ng-hide false ng-hide display:none

ng-show 和ng-if

指令 取值 效果 区别
ng-show true 元素显示 CSS控制元素显示,去掉display:none;
ng-if true 元素显示 页面添加元素,显示
ng-show false 元素不显示 CSS控制元素显示,添加display:none;
ng-if false 元素不显示 页面删除元素,消失

demo

  • 使用bootstrap的button 组件显示如下:
原图
  • button3:ng-show = “false”
ng-show = “false”元素只是隐藏
  • button3:ng-if = “false”
ng-if = “false” 元素消失

推荐阅读更多精彩内容

  • ng-model 指令ng-model 指令 绑定 HTML 元素 到应用程序数据。ng-model 指令也可以:...
    壬万er阅读 615评论 0 2
  • 1.背景介绍 指令是一个Dom元素上的标签(和元素上的属性, CSS类样式一样,属于这个Dom元素)它告诉Angu...
    cczhuc阅读 905评论 0 1
  • 1、前辈招生阶段运营流程如下: 2、体现的思维 (1)社会化思维:通过实习僧、前辈等平台推送招生内容。 (2)流量...
    费米姐姐阅读 116评论 0 0
  • 人们的时间到哪里去了?其实都在想象中流逝了! 小时总是盼望长大,大了总是盼望结婚,婚后盼望生子,有了孩子盼望孩子长...
    一只羊1237阅读 189评论 0 0
  • 六祖大师法宝坛经目录 行由第一般若第二疑问第三定慧第四坐禅第五忏悔第六机缘第七顿渐第八宣诏第九付嘱第十 春有百花秋...
    Derek_Kun阅读 478评论 0 5
  • 辞职了,在休了一个漫长的年假后。 2017年3月3日,我离开了工作了三年的地方,没有其他人说那种离职之后的解脱更多...
    七月下旬阅读 127评论 0 0