Question

使用AngularJS我有以下标签的工作代码：

<tabset>
    <tab ng-repeat="item in items">
        <tab-heading>TAB {{ $index+1 }}</tab-heading>
            <form>
            ...
            </form>
    </tab>
</tabset>

我正在尝试使用Tab Control组件实现Metro UI CSS主题 - http://metroui.org.ua/tab-control.html。我想把这两件事结合在一起。

Answer 1

根据上面的网址（https://metroui.org.ua/tabcontrol.html）上的标签页首文档，您可以使用以下内容获取Metro UI CSS主题标签控件：

HTML：

<div class="tabcontrol">
    <ul class="tabs">
        <li ng-repeat="item in items">
            <a ng-click="showPanel(item.panel)" style="cursor:pointer">{{item.title}} - TAB {{ $index+1 }}</a>
        </li>
    </ul>
    <div class="frames">
        <div ng-repeat="item in items" class="frame" ng-show="(activePanel == item.panel)">
            <div>{{item.title}}</div>
            <div>{{item.val}}</div>
        </div>
    </div>
</div>

角度控制器：

$scope.items = [
   { title: 'Home', val: 'Value1', panel: 'Panel1' },
   { title: 'Projects', val: 'Value2', panel: 'Panel2' },
   { title: 'Docs', val: 'Value3', panel: 'Panel3' },
   { title: 'Support', val: 'Value4', panel: 'Panel4' },
   { title: 'Contact', val: 'Value5', panel: 'Panel5' }
];

$scope.showPanel = function(panel) {
   $scope.activePanel = panel;
}

如果每个项目都有一些ID（在本例中为面板ID），您可以创建一个范围变量，例如$scope.activePanel，并在ng-click上设置showPanel(item.panel)。然后，每个标签的框架/ div可以使用ng-show="(activePanel == item.panel)设置其可见性，以便在点击时显示正确的标签。

希望有所帮助。祝你好运！

使用AngularJS ng-repeat的Bootstrap Metro UI CSS选项卡控件组件

1 个答案: