albert's blog: [AngularJS] tabset, active property on tab

2015/04/07

[AngularJS] tabset, active property on tab

Requirement
I have three tabs, 發行資料、發行金額明細與債票明細, in my html page.

After I fill out data in the first tab (發行資料) and click insert (新增) button.

The tab focus should change to the second tab(發行金額明細).

How to do
Define tabs variable In js:

1	$scope.tabs = {tab1: true, tab2: false, tab3: false};

Set active attribute in tab tag:

 <div class="row" style="margin-top:10px;">
   <div class="col-sm-11">
     <tabset style="width:100%;">
         <tab class="text-center" heading="發行資料" style="width:25%;"
              active="tabs.tab1">
           <ng-include src="'dbm100eTab1.html'"></ng-include>
         </tab>
         
         <tab class="text-center" heading="發行金額明細" style="width:25%;" 
              active="tabs.tab2" data-ng-click="clickTab2()" >
           <ng-include src="'dbm100eTab2.html'"></ng-include>
         </tab>
         
         <tab class="text-center" heading="債票明細" style="width:25%;" 
              active="tabs.tab3" data-ng-click="clickTab3()"  >
           <ng-include src="'dbm100eTab3.html'"></ng-include>
         </tab>
     </tabset>
   </div>
 </div>