Javascript 使用单选按钮动态切换所有选项卡

我有一个html页面，页面上有多个格式相同的选项卡，就像页面本身一样，每个部分都有

Markup

和

Javascript

选项卡

就我的问题而言，假设我页面中的所有选项卡也被称为

Markup

或

Javascript

。我想在我的页面顶部有两个单选按钮，根据选择的单选按钮，可以将整个页面中的所有选项卡切换到

Markup

或

Javascript

我正在使用，但所有选项卡都是静态的，有点像：

<tabset>
    <tab heading="Markup">content for 1st markup tab</tab>
    <tab heading="Javascript">content for 1st javascript tab</tab>
</tabset>
.
.
.
<tabset>
    <tab heading="Markup">content for 2nd markup tab</tab>
    <tab heading="Javascript">content for 2nd javascript tab</tab>
</tabset>

第一个标记选项卡的内容
第一个javascript选项卡的内容
.
.
.
第二个标记选项卡的内容
第二个javascript选项卡的内容

单选按钮也来自同一来源：

<div class="btn-group">
    <button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'markup'">markup</button>
    <button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'javascript'">javascript</button>
</div>

加成
javascript

---

到目前为止，我的努力失败了。任何帮助都将不胜感激。

不幸的是，无法在选项卡的“活动”属性中放置表达式，这就是为什么还无法执行以下操作的原因：

<tab heading="Markup" active="radioModel === 'markup'">content for 1st markup tab</tab>

以及关联的模板：

<tabset>
    <tab ng-repeat="tab in tabs[0]" heading="{{tab.title}}" active="tab.active">{{tab.content}}</tab>
</tabset>
<br/>
<br/>
<tabset>
    <tab ng-repeat="tab in tabs[1]" heading="{{tab.title}}" active="tab.active">{{tab.content}}</tab>
</tabset>

{{tab.content}




{{tab.content}

---

可以使用一把工作小提琴：）

您可以像这样在“活动”中放置函数表达式

<tabset>
    <tab heading="Markup" active="markupSelected">content for 1st markup tab</tab>
    <tab heading="Javascript" active="jsSelected">content for 1st javascript tab</tab>

这是一个有效的链接 更新：

---

此解决方案非常酷，但当我手动单击选项卡以更改它们时，它会崩溃。我已经用更好的解决方案更新了帖子中的plunker。请让我知道这是否适合你。如果您需要在用户单击选项卡时切换按钮，请告诉我，我将进行更改。谢谢，是否可以更改它，以便在一个选项卡集中更改选定的选项卡不会更改所有选项卡集？从技术上讲，如果更改一个选项卡集会更改所有选项卡集，则不需要顶部的单选按钮，但这不是我的意图，

<tabset>
    <tab heading="Markup" active="markupSelected">content for 1st markup tab</tab>
    <tab heading="Javascript" active="jsSelected">content for 1st javascript tab</tab>

angular.module('plunker', ['ui.bootstrap'])
  .controller('myCtrl', function($scope) {
    $scope.radioModel = 'markup';
    $scope.$watch('radioModel', function(newTab) {
      $scope.markupSelected = (newTab === 'markup');
      $scope.jsSelected = (newTab === 'javascript');
    });
  });