각도 js의 활성 탭이 UI 부트 스트랩 0.11.0을 사용하여 작동하지 않습니다.

각도 js 부트 스트랩 탭으로 작업하려고합니다. 탭을 추가하거나 제거 할 때마다 마지막 탭이 활성화되기를 원합니다. 이것은 잘 작동합니다. 하지만 언제든지 특정 탭을 선택한 다음 추가/제거하면 활성 탭으로 마지막 탭을 선택하지 않습니다. 다음은 실행중인 예제입니다.각도 js의 활성 탭이 UI 부트 스트랩 0.11.0을 사용하여 작동하지 않습니다.

// 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); 


    }; 
});

누군가가 내가 뭘 잘못 식별에 도움을 주시겠습니까 : 내 JS 코드는 다음

<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>

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

다음은 내 HTML 코드인가?

단계 재현 :

네 개의 새 탭을 추가
당신이 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/#/)에서 availble – georgeawg

제거를 두 번째 탭

를 선택, 당신을 적어도 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 부트 스트랩 0.11.0을 사용하여 작동하지 않습니다.

답변

관련 문제