angularjs - 以编程方式单击以更改UI-Bootstrap中的当前选项卡

我想以编程方式激活选项卡，但找不到方法。

这是一个plunker。
HTML：

<tabset>
<tab id="a1" heading="Static 1">Static 111</tab>
<tab id="a2" heading="Static 2" ng-attr-active="{{nd}}">Static 222</tab>
</tabset>

JS：

$scope.nd = true;

ps：“制表符及其内容不应在js文件中定义”。

最佳答案

我只是为类似的事情而苦苦挣扎。实际上，我几乎错误地得出了一个结论，即不能以编程方式更改静态制表符。但是他们可以。

 <tabset>
        <tab heading="Tab 1"  ng-attr-active="tabs[0].active">
              Tab 1 content
        </tab>
        <tab heading="Tab 2"  ng-attr-active="tabs[1].active">
              Tab 2 content
        </tab>
        <tab heading="Tab 3"  ng-attr-active="tabs[2].active">
              Tab 3 content
        </tab>
 </tabset>
 <button ng-click="make_tab3_active()">Make Tab 3 Active </button>

在Javascript中，您需要

$scope.tabs = [{active: true}, {active: false}, {active: false}];
$scope.make_tab3_active = function() {
    $scope.tabs[2].active = true;
}

因此，仅需指出-单变量将不会。它们应位于数组中-如上所述。尽管文档以类似的方式给出了示例，但尚不清楚，因为2个静态选项卡上没有激活这些选项卡，这可能会使您感到困惑。

在此线程上找到答案之前，我花费了大量时间：https://github.com/angular-ui/bootstrap/issues/611