如何在 Bootstrap 中设置默认选项卡答案

【问题标题】：How to set the default tab in Bootstrap如何在 Bootstrap 中设置默认选项卡
【发布时间】：2014-06-25 02:41:12
【问题描述】：

我有一个关于我的 Angular Bootstrap UI 的问题。

我有类似的东西：

<div class="container" ng-controller='sCtrl'>
    <tabset id='tabs'>
        <tab heading="Title1" >
        </tab>
        <tab heading="Title2" active ="true">
        </tab>
        <tab heading="Title3">
        </tab>
    </tabset>
</div>

我的问题是每次我在标签中添加 active='true' 时，都会得到：

TypeError: undefined is not a function
    at Object.fn (http://test.com/lib/ui-bootstrap-tpls-0.10.0.js:2762:11)
    at h.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:106:71)
    at h.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:108:370)
    at g (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:71:120)
    at C (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:75:241)
    at XMLHttpRequest.y.onreadystatechange (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js:76:280)

我搜索了谷歌并将 jQuery 文件移动到 Bootstrap 文件之前加载，但仍然遇到相同的错误。任何人都可以帮助我吗？非常感谢！

【问题讨论】：

是我还是你使用了active="true'而不是active="true" ??
@Zerquix18 这是一个错字。感谢您指出。
@drew_w myTabs[1] 是什么？ myTabs 是 id 吗？

标签： javascript css angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

简短的答案正是您在问题中引用的内容 - 如果您在代码或 HTML 中将 active 设置为 true，它会选择选项卡。有两种创建选项卡的方法：

静态标签：

<tabset id="tabs">
  <tab heading="Title1"></tab>
  <tab heading="Title2" active="true"></tab>
  <tab heading="Title3"></tab>
</tabset>

如果您设置active="true"，则该选项卡将是默认的活动选项卡。

动态标签：

HTML

<tabset id="tabs2">
  <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"></tab>
</tabset>

Javascript

  $scope.tabs = [
    {"title": "Dynamic 1", "active": false},
    {"title": "Dynamic 2", "active": true},
    {"title": "Dynamic 3", "active": false}];

要查看这两个功能，请查看此插件：http://plnkr.co/edit/nR9GNIhGAmha8Rh85lUa?p=preview

【讨论】：

是的，但是控制台中会出现 undefined is not a function 错误。虽然在你的 plunker +1 中相同
@FlyingCat 如果您注释掉第一个“内联”版本并仅使用没有undefined is not a function 错误的动态版本。我猜测 html 是在 angular boostrap 完成加载之前加载的，这就是第一个选项存在问题的原因。希望至少能有所帮助。

【解决方案2】：

选项卡的active 属性必须指向一个变量，而不是一个常量。您是在告诉第二个标签始终处于活动状态。

active 也不能是表达式。他们似乎正在努力改变active 的工作方式。查看this github issue 了解更多信息。

【讨论】：