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” 元素消失
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容