Angular 使用 ng-switch 來製作 tab

馬上就有朋友跟我說可以用 ng-switch 來製作，於是就用他的寫法來做一個了。

HTML 部分

view plaincopy to clipboardprint

1. <div ng-app ng-controller="tabController" class="wrapper">  
2.     <ul class="clearfix">  
3.         <li ng-repeat="item in items" ng-class="{active:item.name==page}" ng-click="tabChange(item)">{{item.name}}</li>  
4.     </ul>  
5.     <div id="mainView" ng-switch on="page">  
6.         <div ng-switch-when="Cutman">  
7.             <a href="http://www.flickr.com/photos/deathhell/6861320435/"><img src="http://farm8.staticflickr.com/7205/6861320435_87faa1786a.jpg" width="500" height="500" alt="Cutman"></a>  
8.         </div>  
9.         <div ng-switch-when="Iceman">  
10.             <a href="http://www.flickr.com/photos/deathhell/6861320569/" ><img src="http://farm8.staticflickr.com/7038/6861320569_36165752d5.jpg" width="500" height="500" alt="Iceman"></a>  
11.         </div>  
12.         <div ng-switch-when="Fireman">  
13.             <a href="http://www.flickr.com/photos/deathhell/6861320811/" ><img src="http://farm8.staticflickr.com/7064/6861320811_c933a33e2.jpg" width="500" height="500" alt="Fireman"></a>  
14.     </div>  
15. </div>  

主要是在 ng-switch on="page" 判斷 ng-switch-when 的值再顯示該內容，另外在 ng-class="{active:item.name==page}" ，代表當 tab 的名字跟 page 的名字是一樣時，套上 active 這個 class。

js 真是他媽的短

view plaincopy to clipboardprint

1. function tabController($scope){   
2.     $scope.page = 'Cutman';   
3.     $scope.items = [{name:'Cutman'}, {name:'Iceman'}, {name:'Fireman'}];   
4.   
5.     $scope.tabChange=function(item){   
6.         $scope.page = item.name;   
7.     }   
8. }  

Demo

參考:
Use links to change ng-switch
ngSwitch 官方文件

朋友寫的另一個方式，這是在結構都一模一樣的情況下，寫起來可以更簡潔。