Question

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

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


    };
});

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

重现的步骤：

添加四个新标签
选择第二个标签
删除第三个标签

Answer 1

在您使用active="selectedIndex"标签的方式中，您至少需要将ui-bootstrap更新为版本＆gt; = 1.2.0，并为所有人添加uib-前缀指令。（例如：<uib-tabset>，<uib-tab>等）。请参阅此answer以了解如何操作。

无论如何，如何用ui-boostrap版本＆lt; = 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>

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

角度js中的活动选项卡不能使用UI-Bootstrap 0.11.0工作

1 个答案: