AngularJS 的 ng-show, ng-hide

練習 ng-show 和 ng-hide

view plaincopy to clipboardprint

1. <select ng-model="selection">     
2.     <option value="area1">Taipei</option>     
3.     <option value="area2">Taoyuan</option>     
4. </select>  
5. <div ng-show="selection=='area1'">This is Taipei</div>  
6. <div ng-show="selection=='area2'">This is Taoyuan</div>  

第一個不用寫 js ，用select 綁 ng-model ，判斷選到的值後用 ng-show 顯示該顯示的內容。

view plaincopy to clipboardprint

1. <input type="checkbox" ng-model="showDom">    
2. <span ng-show="showDom">Show me</span>  
3.   
4. <input type="checkbox" ng-model="hideDom">    
5. <span ng-hide="hideDom">Hide me</span>   

再來是把 ng-model 綁在 checkbox 上，然後再 ng-show 跟 ng-hide 上，判斷 true/false 後顯示或隱藏， ng-show 跟 ng-hide 剛好是相反的。

第三個則是用 ng-click 改變變數後顯示想顯示的內容。

view plaincopy to clipboardprint

1. <button ng-click="showCon('con1')">Button1</button>      
2. <button ng-click="showCon('con2')">Button2</button>    
3. <button ng-click="showCon('con3')">Button3</button>  
4.   
5. <div ng-show="clickOn=='con1'">con1</div>  
6. <div ng-show="clickOn=='con2'">con2</div>  
7. <div ng-show="clickOn=='con3'">con3</div>  

js 部分

view plaincopy to clipboardprint

1. $scope.showCon=function(con){   
2.     $scope.clickOn=con;   
3. }  

Demo