如何使用 angularjs 将标签标题与正文分开？答案

【问题标题】：How can I separate tabs headings from their bodies with angularjs?如何使用 angularjs 将标签标题与正文分开？
【发布时间】：2015-10-19 13:45:37
【问题描述】：

在 angularjs 项目中，我使用 uib-tabset 指令来显示选项卡。我想显示一个所有选项卡通用的左侧面板。所以我必须在 uib-tabset 指令之前或之后添加一个 div。

默认情况下，标题部分直接位于标签正文的顶部。

在生成的结构中，我想将面板包含在选项卡内（视觉上）：

使用uib-tabsets，生成的结构是这样的：

<panel>
<tabs-headings>
<tabs-bodies>

使用这种结构，我发现的唯一方法是编辑 css 并使用位置属性（左/上）来移动侧面板顶部的标题，但我发现这样做有风险。另一种方法是在每个选项卡内复制面板代码，但我也觉得这很糟糕。

相反，我想生成它，这样创建 css 会更容易：

<tabs-heading>
<panel>
<tabs-bodies>

有没有一种简单的方法来实现这种行为？

谢谢

【问题讨论】：

标签： html css angularjs angular-ui-tabset

【解决方案1】：

编辑：大声笑。刚看到我迟到了 10 个月。

我刚刚碰到你在说什么。如果您使用ng-repeat 在每个选项卡中动态呈现内容，这将避免多次重新制作侧面板。

  <div class="tabWrapper">
    <uib-tabset>
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">

      <div class="sidePanel">{{tab.sidepanel}}</div> 
      <div class="tabContent">{{tab.content}}</div>

    </uib-tab>
    </uib-tabset>
  </div>

你也不需要搞乱绝对定位：

.sidePanel {
  float: left;
  width: 20%;
  height: 10em;
  border: 1px solid black;
  border-top: none;
}

或者，如果你使用angular-ui-router，你可以使用抽象状态来完成静态侧面板。

config.js

  $stateProvider
    .state('root.tabs', {
      abstract: true,
      controller: 'TabsCtrl as vm',
      templateUrl: 'templates/app-layout/tabs.tpl.html'
    })   
    .state('root.tabs.view', {
      url: '/tabsview',
      templateUrl: 'templates/app-layout/sidepanel.tpl.html'
    });

tabs.tpl.html

   <div>
      <uib-tabset>
        <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled">

        <div class="sidePanelContainer" ui-view></div>

        <div class="tabContent">{{tab.content}}</div>
        </uib-tab>
      </uib-tabset>
    </div>

sidepanel.tpl.html

<div class="sidePanel">
  <input type="text" value="1234">
  <input type="text" value="4321">
</div>

另请参阅： what is the purpose of use abstract state?

希望对你有帮助

【讨论】：