AngularJS - あるものを削除した後にアクティブなタブセットを設定する

Question

ボタンを押したときにクリックしたボタンを含むコードがあります。タブ配列に新しいタブを追加します。

<div class="btn btn-primary" ng-click="add()">Add</div> 

$scope.add = function() 
    { 
    $scope.tabs.push({heading: 'new', content: 'ddddddd'}); 

    $timeout(function() 
    { 
     $scope.active = $scope.tabs.length; 
    }); 
    } 

その後、アレイは、人口やビューにshowdさ：

$scope.remove = function(index) 
    { 
    $scope.tabs.splice(index, 1); 
    $scope.active = $scope.tabs.length; 
    } 

問題があることである。また、

<uib-tabset active="active"> 
    <uib-tab ng-repeat="tab in tabs" index="$index + 1"> 
     <uib-tab-heading>{{ tab.heading }} - <a ng-click="remove($index)">remove</a></uib-tab-heading> 
     {{tab.content}} 
     </uib-tab> 
    </uib-tabset> 

、各タブには、この関数を呼び出す削除リンクを持っています最後に追加されたタブではないタブを削除すると、アクティブなタブとインデックスが同じになりません。この問題を示すplunkrがあります：http://plnkr.co/edit/02Lll7oPYyvAxcKu5GkK?p=previewご覧のとおり、タブ（最後はない）が削除されたとき、「タブ」と「インデックス」変数は同じではありません。

どのようなアイデアをお願いしますか？

Answer 1

現在、角度ブートストラップはタブの動的生成をサポートしていません。 しかし、もしあなたが$timeout解決策を働かせたいならば。 あなたはあなたが新しいタブを追加したり、既存のものを削除しようとしたときに、タブ選択をするために世話をしますtimeoutのための1つの関数を定義する必要がhere

からより多くを読むことができます。 タブリストの最後のタブのテイクIDです。

function callTimeOut(tabNoIndex) { 

     $timeout(function() { 
      $scope.active = tabNoIndex; 
     }, 0); 
     } 

タブ配列は、クロージャプロパティとしてtabNoのようになります。 これまで作成されたタブは、uitabとして削除されたり、追加されたタブIDを再配置したりしなかったため、を追加する必要があります。

$scope.tabs.push({ 
      heading: 'new', 
      content: 'ddddddd', 
      id: ++tabNo 
     }); 

追加と削除の機能は、このようになります。ここ

$scope.add = function() { 
     $scope.tabs.push({ 
      heading: 'new', 
      content: 'ddddddd', 
      id: ++tabNo 
     }); 

     callTimeOut($scope.tabs.length); 

     } 


     $scope.remove = function(index) { 
     $scope.tabs.splice(index, 1); 

     var tabIndex = $scope.tabs[$scope.tabs.length - 1].id; 
     callTimeOut(tabIndex); 
     } 

はあなたがどんな削除したときにアクティブに設定するタブ取り組んPlunker