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

发布时间：2020-12-17 17:53:41 所属栏目：安全来源：网络整理

导读：我想以编程方式激活选项卡但无法找到方法. 这是一个plunker. HTML： tabsettab id="a1" heading="Static 1"Static 111/tabtab id="a2" heading="Static 2" ng-attr-active="{{nd}}"Static 222/tab/tabset JS： $scope.nd = true; ps：“标签及其内容不应在js

我想以编程方式激活选项卡但无法找到方法.

这是一个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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!