Angular UI Bootstrap 带有 ng-repeat 的标签集

Question

我正在尝试将我的 bootstrap-ui 版本从 0.14.x 升级到最新的 1.3.2，我遇到了一些关于 uib-tabset / uib-tab 指令。

我想做的是使用 ng-repeat 动态创建选项卡，并让 'active' 选项卡由我的重复模型的表达式或属性处理。

 <uib-tabset type="pills" active="{{activeItem.Id}}"  >
    <uib-tab class="arrow_box"
             ng-repeat="item in myObject.myCollection"
             ng-click="SetActiveItem(item)" id="{{$index}}"
             index="{{item.Id}}">

index="{{item.Id}}" 绑定根本不起作用。所以我似乎无法通过表达式设置我的选项卡索引，如果我可以让 uib-tabset 使用活动属性一旦 ng-repeat 是完成。

activeItem 是封闭控制器的 $scope 上的属性。

添加此绑定导致错误：

Error: [$parse:syntax] Syntax Error: Token '{' invalid key at column 2 of the expression [{{item.Id}}] starting at [{item.Id}}].

如果我省略所有内容（uib-tab 上的索引属性和 uib-tabset 上的活动属性）它不会抛出任何错误，但默认情况下它也没有 select 任何选项卡，这意味着我需要单击一个以激活该选项卡。尽管文档声明默认值为 "defaulting to the first tab"。

有什么原因导致 ng-repeat 不再适用于此指令集？我可能在这里遗漏了一些东西，但我很难过。

谢谢

编辑：这是一个显示我遇到的问题的 plunkr link。 https://plnkr.co/edit/DWOILq?p=preview

Answer 1

首先我尝试了很多修复它，但后来我决定在 google 中搜索。我找到了这个 link 。

您的问题是已知问题，不会被修复。 "uib-tab won't toggle active class if uib-tab index is set to dynamic key"。您必须采取一些不同的方法，例如使用“$index”。

Answer 2

在尝试了更多的东西之后，我意识到我犯了一个错误，并且不必为绑定（活动或索引）的表达式包含括号。

只是看起来不像是在评估它们，但实际上是。

下面是应该有效的代码： activeItemId 是父控制器上的属性。

<uib-tabset type="pills" active="activeItemId">
    <uib-tab class="arrow_box"
             ng-repeat="item in myObject.myCollection"
             ng-click="SetActiveItem(item)"
             index="item.Id">
    </uib-tab>
</uib-tabset>

Angular UI Bootstrap 带有 ng-repeat 的标签集

Angular UI Bootstrap tabset with ng-repeat

twitter-bootstrap

angularjs

angular-ui-bootstrap

angular-ui-bootstrap-tab