Angularjs 在angular js中的活动选项卡不'；使用UI引导程序0.11.0无法工作_Angularjs_Tabs_Angular Ui Bootstrap

Angularjs 在angular js中的活动选项卡不'；使用UI引导程序0.11.0无法工作

angularjs tabs

Angularjs 在angular js中的活动选项卡不'；使用UI引导程序0.11.0无法工作,angularjs,tabs,angular-ui-bootstrap,Angularjs,Tabs,Angular Ui Bootstrap,我正在尝试使用angular js引导选项卡。无论何时添加或删除选项卡，我都希望最后一个选项卡处于活动状态。这个很好用。但是，每当我尝试选择一个特定选项卡，然后添加/删除时，它不会选择最后一个选项卡作为活动选项卡。下面是它的运行示例以下是我的html代码： <html ng-app="plunker"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.j

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

以下是我的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>

有人能帮我找出我做错了什么吗

复制步骤：

添加四个新选项卡

选择第二个选项卡

移除第三个标签

使用带有

active=“selectedIndex”

的选项卡时，您至少需要将ui引导更新到版本>=1.2.0，并在所有指令中添加

uib-

前缀。（例如：

，

等）。看看这个就知道怎么做了

不管怎样，如果你使用的是一个非常旧的ui引导版本，那么如何使用ui引导版本来实现这一点呢！尝试更新版本…或者在处理选项卡集时根本不使用ui-*指令；只需正确设置标记并自己操作属性即可。的最新版本为2.5.6。可用，因为我已升级到2.0.0版，但其中的活动功能也不起作用。我将使用plunker更新我的awnser，使其更新为新版本，这样您就可以看到自己做错了什么

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


    };
});

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