CODEWITHSUNDEEP
angularjstwitter-bootstrapnavnav-pills
SoftEngineer1
SoftEngineer1

Reputation: 57

how to dynamically add active tab functionality?

Everytime I click on a tab I want it to become active. How should I achieve this?

<ul class="nav nav-pills pull-left" role="pilllist">

  <li class="active" data-placement="right" title="Voucher Details"><a data-toggle="pill" role="pill" ng-href="#/">Pay Vouchers</a>
  </li>
  <li><a ng-href="#/paycode" data-toggle="pill" role="pill" data-placement="right" title="Paycode Details">Pay Types</a>
  </li>
  <li><a ng-href="#/deduction" data-toggle="pill" role="pill" data-placement="right" title="Deduction Details">Deductions</a>
  </li>
  <li><a ng-href="#/tax" data-toggle="pill" role="pill" data-placement="right" title="Tax Deduction Details">Taxes</a>
  </li>
  <li><a ng-href="#/timeoff" data-toggle="pill" role="pill" data-placement="right" title="Time Off Details">Paid Time Offs</a>
  </li>
  <li id="hid"><a ng-href="#/grosspay" data-toggle="pill" role="pill" data-placement="right" title="Gross Pay Details">Payroll Details</a>
  </li>
</ul>

Upvotes: 1

Views: 1657

Answers (1)

Catalin MUNTEANU
Catalin MUNTEANU

Reputation: 5634

One way to do it is to have a variable which stores the current tab in your scope . For example:

// In the controller
$scope.tab = 0;

// In the HTML
<ul class="nav nav-pills pull-left" role="pilllist">
    <li ng-class="{active: tab===0}">
        <a ng-click="tab=0" ng-href="#/" data-placement="right" title="Voucher Details">Pay Vouchers</a>
    </li>
    <li ng-class="{active: tab==1}">
        <a ng-click="tab=1" ng-href="#/paycode" role="pill" data-placement="right" title="Paycode Details">Pay Types</a>
    </li>
    <li ng-class="{active: tab==2}">
        <a ng-click="tab=2" ng-href="#/deduction" role="pill" data-placement="right" title="Deduction Details">Deductions</a>
    </li>
    <li ng-class="{active: tab==3}">
        <a ng-click="tab=3" ng-href="#/tax" role="pill" data-placement="right" title="Tax Deduction Details">Taxes</a>
    </li>
    <li ng-class="{active: tab==4}">
        <a ng-click="tab=4" ng-href="#/timeoff" role="pill" data-placement="right" title="Time Off Details">Paid Time Offs</a>
    </li>
    <li id="hid" ng-class="{active: tab==5}">
        <a ng-click="tab=5" ng-href="#/grosspay" role="pill" data-placement="right" title="Gross Pay Details">Payroll Details</a>
    </li>
</ul>

Upvotes: 1

Related Questions