ng-show是什麼?
ng-show/ng-hide是有條件的顯示/隱藏html內的內容。
先來看看1個簡單的範例如下:
官方網站的ng-show範例-清楚展示ng-show,ng-hide的效果。
http://jsbin.com/opojaq/7/edit
ng-show怎麼用?
只需要在欲觸發的事件上綁定名稱,例如: ,
接下來在你想要顯示/隱藏的物件中,加入ng-show/ng-hide就可以直接產生效果,說明如下:
顯示: 欲顯示的文字
隱藏: 欲隱藏的文字
判斷是否要顯示:
(1) 在欲觸發的事件上,綁定model名稱。
<select ng-model="selection">
<option value="content1" >下拉選單文字1</option>
<option value="content2">下拉選單文字2</option>
</select>
(2) 透過判斷式,決定顯示內容。
<article ng-show="自訂model名稱 == 'content1'">判斷是否要顯示的內容</article>
再看看2個範例:
使用ng-show指令,完成”展開回覆狀況”效果。
http://jsbin.com/opojaq/8/edit
使用ng-show判斷,實現下拉選單,選擇不同內容。
http://jsbin.com/afomon/7/edit
官方文件說明
http://docs.angularjs.org/api/ng.directive:ngShow
---------------入門AngularJS筆記---------------
Day27- 入門AngularJS筆記-AngularJS指令(23): ng-form
http://ithelp.ithome.com.tw/question/10140193
Day26- 入門AngularJS筆記-AngularJS: angularJS與form的應用
http://ithelp.ithome.com.tw/question/10140147
Day25- 入門AngularJS筆記-AngularJS指令(22) ng-style
http://ithelp.ithome.com.tw/question/10140067
Day24- 入門AngularJS筆記-AngularJS指令(21) $watch
http://ithelp.ithome.com.tw/question/10139851
Day23- 入門AngularJS筆記-AngularJS指令(20) ng-blur與ng-focus
http://ithelp.ithome.com.tw/question/10139721
Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
http://ithelp.ithome.com.tw/question/10139571
Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html
http://ithelp.ithome.com.tw/question/10139381
Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
http://ithelp.ithome.com.tw/question/10139077
Day19- 入門AngularJS筆記-AngularJS指令(16) ng-cloak
http://ithelp.ithome.com.tw/question/10139014
Day18- 入門AngularJS筆記-AngularJS指令(15) ng-bind
http://ithelp.ithome.com.tw/question/10138821
Day17- 入門AngularJS筆記-AngularJS的timeout應用
http://ithelp.ithome.com.tw/question/10138627
Day16- 入門AngularJS筆記-AngularJS指令(14): ng-checked
http://ithelp.ithome.com.tw/question/10138409
Day15- 入門AngularJS筆記-AngularJS的MVC應用筆記
http://ithelp.ithome.com.tw/question/10137781
Day14- 入門AngularJS筆記-AngularJS指令(13): ng-href
http://ithelp.ithome.com.tw/question/10137625
Day13- 入門AngularJS筆記-AngularJS指令(12): ng-src
http://ithelp.ithome.com.tw/question/10137296
Day12- 入門AngularJS筆記-AngularJS指令(11): ng-include
http://ithelp.ithome.com.tw/question/10136841
Day11- 入門AngularJS筆記-AngularJS指令(10): ng-change
http://ithelp.ithome.com.tw/question/10136545
Day10- 入門AngularJS筆記-AngularJS指令(9): ng-switch
http://ithelp.ithome.com.tw/question/10136011
Day9- 入門AngularJS筆記-AngularJS指令(8): select的ng-options
http://ithelp.ithome.com.tw/question/10135776
Day8- 入門AngularJS筆記-AngularJS指令(7): input
http://ithelp.ithome.com.tw/question/10135378
Day7- 入門AngularJS筆記-AngularJS指令(6): ng-repeat
http://ithelp.ithome.com.tw/question/10134889
Day6- 入門AngularJS筆記-AngularJS指令(5): ng-init
http://ithelp.ithome.com.tw/question/10134415
Day5- 入門AngularJS筆記-AngularJS指令(4): ng-show
http://ithelp.ithome.com.tw/question/10133625
Day4- 入門AngularJS筆記-AngularJS指令(3): ng-click
http://ithelp.ithome.com.tw/question/10133576
Day3- 入門AngularJS筆記-AngularJS指令(2): ng-controller
http://ithelp.ithome.com.tw/question/10133017
Day2- 入門AngularJS筆記-AngularJS指令(1): ng-model
http://ithelp.ithome.com.tw/question/10132601
Day1- 入門AngularJS筆記與前端領域的學習筆記分享介紹
http://ithelp.ithome.com.tw/question/10132196