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 でアクティブなプロパティを使用することができれば、式を介してタブ インデックスを設定できないようです。

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 属性) を省略した場合、エラーはスローされませんが、デフォルトではタブも選択されません。つまり、1 つをクリックしてそのタブをアクティブにする必要があります。ドキュメントには、デフォルトは「最初のタブにデフォルト設定」されていると記載されていますが。

このディレクティブ セットで ng-repeat が正しく機能しなくなった理由は何ですか? 私はおそらくここで何かを見逃していますが、困惑しています。

ありがとう

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

4

2 に答える 2

1

最初はそれを修正するために多くのことを試みましたが、その後Googleで検索することにしました. このリンクを見つけました。

問題は既知の問題であり、修正されません。「uib-tab インデックスが動的キーに設定されている場合、uib-tab はアクティブなクラスを切り替えません」。「$index」を使用するなど、別のアプローチを取る必要があります。

于 2016-04-26T14:42:05.523 に答える
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 に答える