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에 대한 하나 개의 함수를 정의 할 필요가 더 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