Question

我对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)

我搜索了google并在Bootstrap文件之前移动了jQuery文件，但仍然遇到了同样的错误。任何人都可以帮我吗？非常感谢！

Answer 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}];

要查看这两项工作，请查看此plunker：http://plnkr.co/edit/nR9GNIhGAmha8Rh85lUa?p=preview

Answer 2

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

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

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

2 个答案: