如何在带有静态内容的 angularjs bootstrap 选项卡上设置活动状态 [英] how to set active on angularjs bootstrap tab with static content

问题描述

我正在使用 Angular Bootstrap UI 来显示带有静态内容的标签集.我包含的引导脚本是 ui-bootstrap-tpls-0.6.0.min.js.

这是我的标记:

<tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}"><标签标题>选项卡1</tab-heading><div>标签内容 1

</tab><tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}"><标签标题>选项卡2</tab-heading><div>标签内容 2

</tab></tabset>

这是控制器

function myController($scope) {$scope.hideme = false;});

如果我没有在选项卡上应用 ng-class，它运行良好，除了当第一个选项卡隐藏和第二个选项卡显示 ($scope.hideme = false) 时，第一个选项卡的内容将显示 avtive.

如果我添加了 ng-class，它会导致 angularjs 出错.错误:[$parse:syntax] http://errors.angularjs.org/undefined/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=16&p3=%7Bactive%3Afalse%7D%20%7Bactive%3A%20active%2C%20disabled%3A%20disabled%47D&=%7Bactive%3A%20active%2C%20disabled%3A%20disabled%7D

使特定选项卡处于活动状态的正确方法(或正确的语法)是什么?

解决方案

我建议不要尝试执行显示/隐藏逻辑.我也对此感到沮丧，因为 UI Bootstrap Tab 文档 只显示导航到选项卡通过与 ng-repeat 绑定创建.

但我相信您可以将 tabset 指令中的选项卡引用为 $parentScope.tabs.使用 $parent.tabs[2].select() 可以实现如此简单的导航:

<标签标题=标签1"><button class="btn btn-success" ng-click="$parent.tabs[2].select()">转到选项卡 3</button></tab><标签标题=标签2"><p>标签2内容</p></tab><tab header="Tab 3"><button class="btn btn-danger" ng-click="$parent.tabs[0].select()">返回标签 1</button></tab></tabset>

如果有帮助，我有一个 工作 Plunker 示例.

I am using Angular Bootstrap UI to show a tabset with static content. The bootstrap script I include is ui-bootstrap-tpls-0.6.0.min.js.

here is my markup:

<tabset>
    <tab ng-show="$parent.hideme" ng-class="{active:$parent.hideme}">
        <tab-heading>
            tab1
        </tab-heading>
        <div>
            tab content 1
        </div>
    </tab>
    <tab ng-hide="$parent.hideme" ng-class="{active:!$parent.hideme}">
        <tab-heading>
            tab2
        </tab-heading>
        <div>
            tab content 2
        </div>
    </tab>
</tabset>

Here is the controller

function myController($scope) {
    $scope.hideme = false;
});

If I don't have ng-class applied on the tab, it works well except that when the 1st tab hide and 2nd tab show ($scope.hideme = false), the content of the 1st tab will show avtive.

If I added ng-class, it caused an error in angularjs. Error: [$parse:syntax] http://errors.angularjs.org/undefined/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=16&p3=%7Bactive%3Afalse%7D%20%7Bactive%3A%20active%2C%20disabled%3A%20disabled%7D&p4=%7Bactive%3A%20active%2C%20disabled%3A%20disabled%7D

What is the right way(or right syntax) to make the specific tab active?

解决方案

I recommend not trying to do the show/hide logic. I was also frustrated by this because the UI Bootstrap Tab documentation only shows navigation to tabs created by binding with ng-repeat.

But I believe you can reference the tabs in the tabset directive as $parentScope.tabs. So simple navigation is possible using $parent.tabs[2].select():

<tabset>
  <tab heading="Tab 1">
    <button class="btn btn-success" ng-click="$parent.tabs[2].select()">Go to Tab 3</button>
  </tab>
  <tab heading="Tab 2">
    <p>Tab 2 contents</p>
  </tab>
  <tab heading="Tab 3">
    <button class="btn btn-danger" ng-click="$parent.tabs[0].select()">Back to Tab 1</button>
  </tab>
</tabset>

I have a working Plunker example if that helps.

这篇关于如何在带有静态内容的 angularjs bootstrap 选项卡上设置活动状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！