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

Question

我在整个页面中都有一个具有相同格式多个选项卡的html页面，就像在angular-ui页面本身一样，其中每个部分都有Markup和Javascript选项卡。

对于我的问题，说我的网页中的所有标签也被称为Markup或Javascript。我希望在页面顶部有两个单选按钮，它们将全部页面中的标签切换到Markup或Javascript，具体取决于所选的单选按钮。

我使用ui.bootrap.tabs但所有的标签都是静态的，有点像：

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

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

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

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

Answer 1

遗憾的是，不可能放在标签的有效属性表达这就是为什么它是不可能没有做这样的事情：

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

看到https://github.com/angular-ui/bootstrap/issues/611。

但是，不要害怕它仍然有可能以更复杂/更动态的方式实现你想要的。我建议你在你的示波器中创建一个数据模型来保存你的选项卡配置，并观察radioModel值来设置/取消设置每个选项卡上的活动状态。类似的东西：

angular.module('app', ['ui.bootstrap']); 
var TabsDemoCtrl = function ($scope) { 

    $scope.radioModel = 'markup'; 
    $scope.tabs = [ 
     // First tab set 
     [{ 
      title: "Markup", 
      content: "content for 1st markup tab", 
      type: 'markup' 
     }, { 
      title: "Javascript", 
      content: "content for 1st javascript tab", 
      type: 'javascript' 
     }], 
     //Second tab set 
     [{ 
      title: "Markup ", 
      content: "content for 2nd markup tab ", 
      type: 'markup' 
     }, { 
      title: "Javascript ", 
      content: "content for 2nd javascript tab", 
      type: 'javascript' 
     }] 
    ]; 


    $scope.$watch('radioModel', function (newValue) { 
     //Iterate over all the tabset configuration 
     angular.forEach($scope.tabs, function (value, key) { 
      //iterate over each tab in a tabset 
      angular.forEach(value, function (tab, key) { 
       //Set the active attribute when needed 
       if (tab.type === newValue) { 
        tab.active = true; 
       } else { 
        tab.active = false; 
       } 
      }); 
     }); 
    }) 
}; 

，关联的模板：

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

一个工作拨弄可here :)

Answer 2

你可以把一个函数表达式中的 “活跃” 像这样。

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

这里的范围是更新工作plunkr链接 ： http://plnkr.co/edit/hJIG5a?p=preview