Question

每次我点击一个标签我希望它变为活动状态。我该怎么做到这一点？

＆＃13;

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

＆＃13;

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

如何动态添加活动标签功能？

1 个答案: