web-dev-qa-db-ja.com

Angular UI Bootstrapで動的に作成されたタブにアクティブなタブを設定する

空白から始まる配列からタブを生成する動的タブセットがあります。配列に新しいアイテムを追加すると、新しいタブとして表示されます。最後に追加したタブをアクティブにします。配列にアイテムを追加するたびにアクティブインデックスを設定します

HTML：

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

JavaScript：

$scope.activeTabIndex = 0
$scope.tabs = [];

$scope.addTab = function() {
    var newTab = {  title: 'Tab ' + ($scope.tabs.length + 1) };
    $scope.tabs.Push(newTab); 
    $scope.activeTabIndex = ($scope.tabs.length - 1);
    console.log($scope.activeTabIndex);
};

デモの完全なソースコードのPlunkは次のとおりです。 https://plnkr.co/edit/TX6ek4R62AfM2zUXcoC3?p=preview

問題は、奇数のタブのみで機能しているように見えることです。ここに私が意味するものがあります：

初期ロード時は次のようになります。

enter image description here

新しいタブを追加すると、アクティブなタブが正しく表示されます。

enter image description here

別のものを追加すると、何も選択されず、activeTabIndex変数が未定義になります。

enter image description here

そして3日目に再び動作を開始します：

enter image description here

したがって、アクティブなインデックス番号（0、2）でも正常に機能します。しかし、どういうわけかAcitve Index：1の代わりに空白を表示し、アクティブタブを設定しません。変数をコンソールに書き込むと、すべての値が正しく表示されます。

ヘルプ/ポインター/アイデアは大歓迎です。

ありがとう。

angularjsangular-ui-bootstrap
11
Volkan Paksoy

docs によると：

active（デフォルト：最初のタブのインデックス）-タブのアクティブなインデックス。これを既存のタブインデックスに設定すると、そのタブがアクティブになります。

タブ配列にアクティブな配列が含まれていることを確認してください。そこに$ timeoutを追加する必要があると思います。

      $scope.addTab = function() {
        var newTab = {  title: 'Tab ' + ($scope.tabs.length + 1) };
        $scope.tabs.Push(newTab); 
        $timeout(function(){
          $scope.activeTabIndex = ($scope.tabs.length - 1);
        });
        console.log($scope.activeTabIndex);
      };

https://plnkr.co/edit/q4QP7zoB0HXSjn3MplE4?p=preview

17
huan feng

私は同様の問題を抱えていましたが、もう少し複雑です。 APIから動的タブをロードしましたが、静的タブが1つあり、残りは動的でした。

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

デフォルト値で2つの変数を使用しました。

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

最初に、APIから動的タブをロードし、次に成功コールバックで、tabs配列からactiveTabIndexの値を指定しました。次に、showTabsの値をtrueに変更しました。

私はそれを共有しましたが、それがこのケースでより多くの人々を助けることを願っています。

0
Roham Rafii