2013年12月20日 星期五

AngularJS 的 ng-show, ng-hide

練習 ng-show 和 ng-hide

  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 顯示該顯示的內容。

  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 改變變數後顯示想顯示的內容。
  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 部分
  1. $scope.showCon=function(con){   
  2.     $scope.clickOn=con;   
  3. }  

Demo
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...