角度jsのアクティブなタブがUI-Bootstrap 0.11.0を使用して機能しない

角度jsブートストラップタブで作業しようとしています。タブを追加または削除するたびに、最後のタブをアクティブにします。これは正常に動作します。しかし、いつでも特定のタブを選択して追加/削除すると、最後のタブはアクティブなタブとして選択されません。以下はその実行例です。角度jsのアクティブなタブがUI-Bootstrap 0.11.0を使用して機能しない

http://plnkr.co/edit/abntin0l7D8FCzGb7tqs?p=preview

後、私のhtmlコードです：後

<html ng-app="plunker"> 

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> 
    <script src="script.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"> 
</head> 

<body> 
    <div class="container" ng-controller="CustomizationCtrlr"> 

    <tabset> 
     <tab sortable-tab ng-repeat="tab in tabs" ng-click="onTabChanges($index)" active="activeTabIndex"> 
     <tab-heading> 

      <span> {{tab.Name}}</span><a ng-click="removeStep($index)"><i class='glyphicon glyphicon-remove' ng-click="removeTab($index)" ng-hide="tabs.length==1"></i></a> 
     </tab-heading> 

     </tab> 

     <i class="glyphicon glyphicon-plus" ng-click="addTab(tTitle)"></i> 

    </tabset> 
    </div> 
</body> 

</html>

は私のjsのコードです：

// Code goes here 
var app = angular.module('plunker', ['ui.bootstrap']); 
app.controller('CustomizationCtrlr', function ($scope, $timeout) { 

//Tabs 
    $scope.AddedWorkFlowTabs = 0; 
    $scope.StepCount = 0; 
    var tabs = [{ 
     "ID": $scope.AddedWorkFlowTabs++, 
     "Name": "Step " + $scope.StepCount++, 
     "Customizations": {QuestionGroups : []} 

    }], 
    IsSameNameTab = false, 
    selected = null, 
    previous = null; 
    $scope.tabIndex = 0 ; 
    $scope.activeTabIndex = 0 ; 
    $scope.tabs = tabs; 
    $scope.selectedIndex = 0; 

    $scope.onTabChanges = function(tabIndex) { 
     //you can add some loading before rendering 
     callTimeOut(tabIndex +1); 

     $scope.currentTab = $scope.tabs[tabIndex]; 
     //$scope.activeTabIndex = tabIndex +1; 
    }; 

    $scope.addTab = function (title, view) { 
     //angular.forEach(tabs, function (tb, key) { 
     // if (tb.Name == title) { 
     //  IsSameNameTab = true; 
     //  showToastrMessage('error', 'You cannot create a step with same name.!'); 

     // } 
     //}); 

     //if (!IsSameNameTab) { 

     $scope.WorkFlow = { 
      "ID": $scope.AddedWorkFlowTabs++, 
      "Name": "Step " + $scope.StepCount++, 
      "Customizations": {QuestionGroups : []} 

     } 

     $scope.tabs.push($scope.WorkFlow); 
     //$scope.activeTabIndex = ($scope.tabs.length); 
     $scope.currentTab =$scope.WorkFlow; 
     $scope.tabIndex = $scope.tabs.length-1; 

     callTimeOut($scope.tabs.length); 
     //}  
     //IsSameNameTab = false; 
    }; 

    function callTimeOut(tabNoIndex) { 

     $timeout(function() { 
      $scope.activeTabIndex = tabNoIndex; 
      $scope.tabIndex = ($scope.activeTabIndex-1); 
     }, 0); 

    } 

    $scope.removeStep = function (index) { 


     $scope.tabs.splice(index, 1); 

     callTimeOut($scope.tabs.length); 


    }; 
});

誰かが私が間違っているの何識別するのに助けてくださいことはできますか？

手順に再現する：

は、4つの新しいタブ
を追加
2番目のタブを選択し、あなたがactive="selectedIndex"とあなたのタブを使用しているように

出典

2017-12-26 Sana

あなたはUI-ブートストラップの非常に古いバージョンを使用しています！新しいバージョンを試してみてください。 – Rachmaninoff

...タブセットを扱うときにui- *指令を使用しないでください。マークアップを取得して、属性を自分で操作してください。 – davidkonrad

最新バージョンの[UI-Bootstrap]（http://angular-ui.github.io/bootstrap/）は2.5.6です。 https://unpkg.com/angular-ui-bootstrap/ui-bootstrap-tpls.js [UNPKG]（https://unpkg.com/#/）で入手可能 – georgeawg

あなたの3番目のタブを削除しますui-bootstrapをversion> = 1.2.0に更新する必要があります。uib-という接頭辞をすべてのディレクティブに追加してください。（例えば、<uib-tabset>,<uib-tab>など）。方法については、answerを参照してください。

とにかく、どのようにUI-ブートストラップバージョン< = 1.2.0でこれを達成することができますか？

active is a booleanの主な違いは、active="tab.active"のように繰り返し動的プロパティを追加する必要があることです。ここでは、your updated plunker

HTML（重要な部分）です

<tabset> 
    <tab ng-repeat="tab in tabs" active="tab.active"> 
    <!-- Rest of the tab header code --> 
    <a ng-click="removeTab($index)" ng-hide="tabs.length==1">Remove</a> 
    </tab> 

    <a ng-click="addTab()">Add</a> 
</tabset>

$scope.addTab = function() { 
    $scope.tabs.push({"ID": $scope.id++, "Name": "Step " + $scope.tabNumber++}); 
    setLastTabActive(); 
} 

$scope.removeTab(index) { 
    $scope.tabs.splice(index, 1); 
    setLastTabActive(); 
} 

function setLastTabActive() { 
    $scope.tabs[$scope.tabs.length - 1].active = true; 
}

出典

2017-12-27 00:27:41

私はバージョン2.0.0にアップグレードしましたが、それでもあまりにもアクティブな機能は動作しません – Sana

あなたが間違っていることを見ることができるように、私はplunkerと新しいバージョンのための私のawnserを更新します –

角度jsのアクティブなタブがUI-Bootstrap 0.11.0を使用して機能しない

答えて

関連する問題