angular js 中的活动选项卡无法使用 UI-Bootstrap 0.11.0

Question

我正在尝试使用 angular js bootstrap 选项卡。每当我添加或删除选项卡时，我都希望最后一个选项卡处于活动状态。这很好用。但是每当我尝试 select 一个特定的选项卡然后 add/remove 它不会 select 最后一个选项卡作为活动选项卡。以下是它的运行示例。

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


    };
});

有人可以帮助确定我做错了什么吗？

重现步骤：

添加四个新标签
Select 第二个选项卡
删除第三个选项卡

Answer 1

按照您在 active="selectedIndex" 上使用标签的方式，您至少需要将 ui-bootstrap 更新到版本 >= 1.2.0 并添加一个uib- 所有指令的前缀。（例如：<uib-tabset>、<uib-tab> 等）。请参阅此了解如何操作。

Anyways, how can achieve this with ui-boostrap version <= 1.2.0 ?

主要区别在于active is a boolean so you need to add a dynamic property in you repeat like active="tab.active". Here you are 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>

JS

$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;
}

angular js 中的活动选项卡无法使用 UI-Bootstrap 0.11.0

Active tab in angular js doesn't work using UI-Bootstrap 0.11.0

tabs

angularjs

angular-ui-bootstrap