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

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

準備 html

view plaincopy to clipboardprint

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 這樣。

view plaincopy to clipboardprint

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