Question

我试图通过标记将标签设置为活动状态。出于某种原因，当我在选项卡上设置活动属性时，似乎会破坏选项卡的状态。页面加载正常，单击另一个选项卡时，将禁用设置为活动的选项卡。当我单击返回使用active =＆＃34; true＆＃34;设置的标签时不会取消选择之前选择的选项卡。

...
<tab heading="Dynamic Title 1" active="true">Some Title 1</tab>
...

http://plnkr.co/edit/xzDbezXgkSMr6wokov6g?p=info

我切换到创建一个在init处设置为true的变量，并将其填充到active属性中。我希望有更好的方法。

  <tabset ng-init="startActive = true">
    ...
    <tab heading="Dynamic Title 1" active="startActive">Some Title 1</tab>
    ...
  </tabset>

http://plnkr.co/edit/mt5MQSZEl730fsMuMxg8

我不想在js中定义选项卡，因为这是一个使用webforms的项目，从那里到js的管道数据可能比我在这里做的更糟糕。我将页面更改为完全使用angular构建，在这种情况下，管道数据（如要选择的选项卡）可能是某些配置端点的一部分，这些端点将在控制器的init上点击。我宁愿不必重新设计一个完整的页面来进行此更改，但它似乎是最正确的方法。任何想法和提示将不胜感激。

Answer 1

你在这里失踪了不少。这是一种更具扩展性的方式：

＆＃13;

var app = angular.module('myApp',[]);

app.controller('MyController', ['$scope',function($scope){
  $scope.tab = 0;
  
  $scope.changeTab = function(newTab){
    $scope.tab = newTab;
  };
  
  $scope.isActiveTab = function(tab){
    return $scope.tab === tab;
  };
  
}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE HTML>
<html ng-app="myApp">
	<head>
      <style type="text/css">
          .active{
          background-color:red;
        }
        </style>
	</head>
	
	<body ng-controller="MyController">
		<div>
			<div ng-class="{'active':isActiveTab(0)}" ng-click="changeTab(0)">Some Title 1</div>
			<div ng-class="{'active':isActiveTab(1)}" ng-click="changeTab(1)">Some Title 2</div>
		</div>
		<br/>
		<div ng-show="isActiveTab(0)">tab1</div>
		<div ng-show="isActiveTab(1)">tab2</div>

		
		<script type="text/javascript" src="js/angular-1.2.24.min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		
	</body>
</html>

＆＃13;

初始化应始终在控制器中。
使用控制器功能更改值。这里定义为＆＃39; changeTab（）＆＃39;
要检查活动选项卡，请创建一个控制器功能，以比较$ scope.tab的当前值是否等于当前选项卡。

我还添加了一些样式来强制哪个标签处于活动状态。

Answer 2

我知道这已经很老了，但是在浪费了我几个小时后，我想出了一个超级肮脏的黑客，这就是诀窍（假设我正确地理解了你的问题而且你与我有同样的问题。）

问题陈述

使用UI Bootstrap选项卡，根据列表数据动态添加选项卡，并在此数据之外维护活动状态。

使用UI Bootstrap的选项卡并生成如下选项卡时：

<tab ng-repeat="item in page.data.list" active="item.active">

UI Bootstrap将使用项目的绑定来存储活动状态。如果我们省略了active属性，UI Bootstrap将在内部维护它，但是从外部操作活动状态变得不可能，除了通过以下方法之一访问它：$$（这是惹不起的！ ）

解决方案（黑客）

在另一个列表中维护活动状态：

<div ng-controller="parasample-tabs">
{{activeState}}
<tabset ng-show="page.data.list.length">
    <tab ng-repeat="item in page.data.list" active="activeState[$index]">
                <tab-heading>
        <i style="cursor: pointer" class="glyphicon glyphicon-remove" ng-click="delTab($index)" prevent-default></i>
        Item {{$index +1}}
    </tab-heading>
    {{item.text}} - {{item.transcript}} - {{item.active}}
    </tab>
</tabset>
<!-- 
  For me this problem arose because I like to use self-contained, self-managing data 
  from factories, hence I call addItem not on a controller
-->
<button ng-click="page.addItem()">Add Item</button>
</div>

现在对于控制器来说，它包含在那些选项卡中并管理它们，以及它们的活动状态，而不是将其写入我的数据中：

app.controller('parasample-tabs', function ($scope) {
    $scope.maxItems = 5;

    $scope.activeState = [];
    $scope.delTab = function (idx) {
        var list = $scope.page.data.list;
        if (list.length > 0) {
            $scope.page.delItem(idx);
            $scope.activeState.splice(idx, 1);
        }
    };
    $scope.$watch(
        "page.data.list.length",
        function (newLen, oldLen) {
            if (!newLen) return;
            // new item => new tab, make active
            if (newLen > oldLen)
                $scope.activeState.push("true");
        }
    );
});

现在，UI Bootstrap将访问数组activeState并在那里存储活动状态。没有必要进行初始化，因为这需要处理。

当一个新项目被添加到我们的数据列表中时，手表会将新选项卡设置为活动选项卡（这是我的偏好），其余的列表将由UI Bootstrap更新。

但是，删除时，很难确定删除了哪个项目，因此我必须将page.delItem包装到控制器的delTab方法中。

Here也是一个小提琴。

让我们希望UI Bootstrap允许以不同的方式维护活动状态，而不是在active属性中使用双向绑定。我喜欢有一个“活动ID”变量。

免责声明： 我知道这有多脏，我到目前为止只在Chrome中进行了测试，效果很好。

Angular Bootstrap选项卡通过标记设置活动选项卡

2 个答案:

问题陈述

解决方案（黑客）