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” 元素消失
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容