2013年12月2日 星期一

Angular 使用 ng-switch 來製作 tab

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

HTML 部分
  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 真是他媽的短

  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 官方文件

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

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...