2013年12月2日 星期一

Angular 使用 ng-class 和 ng-show 來製作 tab

上次有用 ng-template 來製作網頁上的 tab ,這次用 ng-class 跟 ng-show 來製作看看。

準備 html

  1. <div ng-controller="tabController" class="wrapper">  
  2.     <ul class="clearfix">  
  3.         <li ng-class="{active: isCut}" ng-click="onClickTab1()">Cutman</li>  
  4.         <li ng-class="{active: isIce}" ng-click="onClickTab2()">Cutman</li>  
  5.     </ul>  
  6.     <div id="mainView">  
  7.         <div ng-show="isCut">  
  8.             <a href="http://www.flickr.com/photos/deathhell/6861320497/" title="Flickr 上 紅色死神 的 Gutsman"><img src="http://farm8.staticflickr.com/7193/6861320497_f9b2492d24.jpg" width="500" height="500" alt="Gutsman"></a>  
  9.             </div>  
  10.         <div ng-show="isIce">  
  11.             <a href="http://www.flickr.com/photos/deathhell/6861320569/" title="Flickr 上 紅色死神 的 Iceman"><img src="http://farm8.staticflickr.com/7038/6861320569_36165752d5.jpg" width="500" height="500" alt="Iceman"></a>  
  12.         </div>  
  13.     </div>  
  14. </div>  

主要就是判斷 true 或 false 來 show/hide 和 add/remove class 這樣。

  1. function tabController($scope){        
  2.     $scope.isCut = true;   
  3.     $scope.onClickTab1 = function () {   
  4.         $scope.isCut = true;   
  5.         $scope.isIce = false;   
  6.     }        
  7.     $scope.onClickTab2 = function() {   
  8.         $scope.isCut = false;   
  9.         $scope.isIce = true;   
  10.     }   
  11. }  

不過我覺得寫的沒有很好,之後 Angular 更熟的話再用更好的寫法寫看看。

Demo
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...