1

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

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

 <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}}"绑定根本不起作用。所以我似乎无法通过表达式设置我的选项卡索引，如果我可以在 ng-repeat 完成后让 uib-tabset 使用 active 属性，这将不是问题。

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

添加此绑定会导致错误：

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

如果我省略所有内容（uib-tab 上的 index 属性和 uib-tabset 上的 active 属性），它不会引发任何错误，但默认情况下它也不会选择任何选项卡，这意味着我需要单击一个来激活该选项卡。即使文档声明默认值是“默认为第一个选项卡”。

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

谢谢

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

4

2 回答 2

1

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

看起来他们并没有被评估，但实际上他们是。

这是应该工作的代码： 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>
于 2016-04-29T14:19:51.397 回答
1

首先我尝试了很多来修复它，但后来我决定在谷歌搜索。我找到了这个链接。

您的问题是已知问题，不会得到解决。“如果 uib-tab 索引设置为动态键，uib-tab 将不会切换活动类”。你必须采取一些不同的方法，比如使用'$index'。

于 2016-04-26T14:42:05.523 回答