1

每次我单击一个选项卡时，我都希望它处于活动状态。我应该如何实现这一目标？

<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>

4

1 回答 1

1

一种方法是使用一个变量，将当前选项卡存储在您的范围内。例如：

// 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>
于 2014-10-24T21:31:10.943 回答