ng-repeatを使用した角型UIブートストラップタブセット

Question

私のバージョンの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}}"> 

インデックス= "{{item.Idは}}"結合はまったく動作しません。ですから、ng-repeatが完了したら、アクティブなプロパティを使用するようにuib-tabsetを取得できれば、問題はありません。

activeItemは、囲みコントローラの$ scopeのプロパティです。私はすべて（UIB-タブセットにUIB-タブとアクティブ属性のindex属性）を省略した場合、それはすべてのエラーをスローしますが、それはありません

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

：エラーが発生し、この結合結果を追加

デフォルトではタブは選択されていません。つまり、そのタブをアクティブにするには、タブをクリックする必要があります。ドキュメントでは、デフォルトが「最初のタブにデフォルト設定されている」と記載されています。

何らかの理由でng-repeatがこのディレクティブセットで正常に動作しなくなりましたか？私はおそらくここに何かが欠けているだろうが、私は困惑している。

おかげ

編集： は、ここに私がいる問題を示すplunkrリンクです。 https://plnkr.co/edit/DWOILq?p=preview

Answer 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> 

Answer 2

まず最初に私はそれを修正しようとしましたが、その後Googleで検索することに決めました。私はこれを見つけたlink。

この問題は既知の問題であり、修正されません。 "uib-tabインデックスが動的キーに設定されている場合、uib-tabはアクティブクラスを切り替えません"。あなたは '$ index'のようないくつかの異なるアプローチを取らなければなりません。