angularjs - 使用 AngularJS ng-repeat 引导 Metro UI CSS 选项卡控件组件

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

根据上面 url ( https://metroui.org.ua/tabcontrol.html ) 上的 tabs-on-top 文档，您可以让 Metro UI CSS 主题 Tab Control 使用如下内容：

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-clickwith上设置showPanel(item.panel)。然后每个选项卡的 frame/div 可以设置它的可见性，ng-show="(activePanel == item.panel)以便在单击时显示正确的选项卡。

希望有帮助。祝你好运！