javascript - 使用单选按钮动态切换所有标签

我有一个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>

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

最佳答案

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

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