分頁(Tab)使用

1 篇文章 / 0 new

發表回應前，請先登入

週二, 2014-07-08 11:08

author

分頁(Tab)使用

class設定

nav-tabs : 頁籤方式呈現
nav-pills : 按鈕方式呈現
nav-justified : 加入此類型則會 tabl/button 填滿整個寬度

► 分頁-動態資料, 利用連結取得顯示資料

<div ng-init="names = [{name:'one'}, {name:'two'}, {name:'three'}, {name:'four'}, {name:'five'}]">
    <ul class="nav nav-tabs">
        <li ng-repeat="name in names" ng-class="{active: $index == 0}">	<a href="#tab{{$index + 1}}" data-toggle="tab">Tab {{$index + 1}}</a>
        </li>
    </ul>
</div>

► 分頁-靜態資料, 資料已在網頁中僅分頁呈現

<div ng-init="tab = 1">
    <ul class="nav nav-tabs">
        <li ng-class="{true:'active'}[tab==1]"><a href="javascript:void(0)" ng-click="tab=1">Home</a></li>
        <li ng-class="{true:'active'}[tab==2]"><a ng-click="tab=2">Profile</a></li>
        <li ng-class="{true:'active'}[tab==3]"><a ng-click="tab=3">Messages</a></li>
    </ul>
    <div ng-show="tab==1">Home data</div>
    <div ng-show="tab==2">Profile data</div>
    <div ng-show="tab==3">Messages data</div>
</div>

使用 Bootstrap