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

不幸的是，不可能在选项卡的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：）

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

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

2 个答案: