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” 元素消失