Question

我正在尝试使用带有angularjs＆amp;的bootstrap选项卡。添加了ng-click以在选项卡上设置活动类，但它没有发生，下面是我的代码：

<ul class="nav nav-tabs" role="tablist">
        <li role="presentation" ng-class="{ 'active': tab === 1 }"><a href="#email" aria-controls="email" role="tab" data-toggle="tab" ng-click="tab = 1">Email</a></li>
        <li role="presentation" ng-class="{ 'active': tab === 2 }"><a href="#phone" aria-controls="phone" role="tab" data-toggle="tab" ng-click="tab = 2">Phone</a></li>
        <li role="presentation" ng-class="{ 'active': tab === 3 }"><a href="#username" aria-controls="username" role="tab" data-toggle="tab" ng-click="tab = 3">Username</a></li>
    </ul>

标签的值没有变化，这就是特定课程未被应用的原因。

Answer 1

只需将===更改为==，就可以了：

<ul class="nav nav-tabs" role="tablist">
    <li role="presentation" ng-class="{ 'active': tab == 1 }"><a href="#email" aria-controls="email" role="tab" data-toggle="tab" ng-click="tab = 1">Email</a></li>
    <li role="presentation" ng-class="{ 'active': tab == 2 }"><a href="#phone" aria-controls="phone" role="tab" data-toggle="tab" ng-click="tab = 2">Phone</a></li>
    <li role="presentation" ng-class="{ 'active': tab == 3 }"><a href="#username" aria-controls="username" role="tab" data-toggle="tab" ng-click="tab = 3">Username</a></li>
</ul>

JSFiddle here。

Answer 2

在您的控制器中，尝试使用

$scope.obj = { tab : 1};

然后在视图中：

obj.tab

而不仅仅是标签

ng-click不在angularjs

2 个答案: