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

Question

我正在尝试通过标记将选项卡设置为活动状态。出于某种原因，当我在选项卡上设置活动属性时，它似乎破坏了选项卡的状态。页面加载正常，当单击另一个选项卡时，设置为活动的选项卡将被停用。当我点击设置为 active="true" 的标签时，不会取消选择之前选择的标签。

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

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

我切换到创建一个在初始化时设置为 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

我知道这已经很老了，但是在浪费了我的生命之后，我想出了一个超级 肮脏的 hack，它可以解决问题（假设我正确理解了你的问题并且你和我有同样的问题）。

问题陈述

使用 UI 引导选项卡，根据列表数据动态添加选项卡，并在此数据之外保持活动状态。

当使用 UI Bootstrap 的 Tabs 并生成如下标签时：

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

UI Bootstrap 将使用项目的绑定来存储活动状态。如果我们省略 active 属性，UI Bootstrap 将在内部维护它，但随后就无法从外部操纵活动状态，除非通过以下之一访问它：$$（这是不可触碰的！ em>)

解决方案（黑客）

在另一个列表中保持活动状态：

<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 允许以不同的方式保持活动状态，而不是在活动属性中进行双向绑定。我喜欢有一个“活动 ID”变量。

免责声明：我知道这有多脏，到目前为止我只在 Chrome 中测试过它，它运行良好。

Answer 2

你在这里错过了很多。这是一种更可扩展的方式：

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

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

1. 初始化应始终在控制器中。
2. 使用控制器功能更改值。这里，定义为'changeTab()'
3. 为了检查活动选项卡，创建一个控制器函数来比较 $scope.tab 的当前值是否等于当前选项卡。

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