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”
- button3:ng-if = “false”