web-dev-qa-db-ja.com

Angular UI-アクティブタブをプログラムで設定

私はこのコードでAngularUIを使用しています：

<uib-tabset type="pills">
    <uib-tab heading="Tab 1">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2">Tab 2 content</uib-tab>
</uib-tabset>

角度コントローラーコードから現在のアクティブタグをプログラムで変更したい。たとえば、アクティブにするタブ「2」を選択します。

これをどのように行うことができますか？

angularjsangular-ui-bootstrapangular-uiangular-ui-tabset
9
No1Lives4Ever

Ui-tabsetでactiveプロパティを使用する必要があります。次に、外部コンテキストから機能するように、各タブにインデックスを設定する必要があります。

<uib-tabset type="pills" active="active">
    <uib-tab heading="Tab 1" index="0">Tab 1 content</uib-tab>
    <uib-tab heading="Tab 2" index="1">Tab 2 content</uib-tab>
</uib-tabset>

この作業plnkrを参照してください： Working Plnkr

12
Ashwani

私も同じ問題を抱えていたので、これが answer の助けとなりました。

スコープで2つの変数を使用しました：$scope.showTabsInViewと$scope.activeTabIndex。

デフォルト値は次のとおりです。

$scope.showTabsInView = false;
$scope.activeTabIndex = 0;

まず、dynamic tabsをロードしてから、activeTabIndexの値を指定しました。次に、showTabsInViewの値をtrueに変更しました。

<uib-tabset ng-if="showTabsInView" active="activeTabIndex">
    <uib-tab data-ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab>
</uib-tabset>

ケースがそれほど複雑でない場合は、dynamic tabsと$scope.showTabsInViewを単に無視できます。

4
Roham Rafii