html – 如何使用angularjs将标签标题与其主体分开？

发布时间：2020-12-14 18:39:26 所属栏目：资源来源：网络整理

导读：在 angularjs项目中,我使用uib-tabset指令来显示选项卡.我想显示所有标签共有的左侧面板.所以我必须在uib-tabset指令之前或之后添加一个div. 默认情况下,标题部分直接位于标签主体的顶部. 在生成的结构中,我想将选项卡包含在选项卡内(可视化)：使用uib-tabs

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

默认情况下,标题部分直接位于标签主体的顶部.

在生成的结构中,我想将选项卡包含在选项卡内(可视化)：

使用uib-tabsets,生成的结构如下所示：

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

使用这种结构,我找到的唯一方法是编辑css并使用位置属性(左/上)进行播放,以便将标题移动到侧面板的顶部,但我发现这有风险.
另一种方法是复制每个选项卡内的面板代码,但我发现这也很糟糕.

相反,我想生成这个,所以创建css会更容易：

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

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

谢谢

解决方法

编辑：哈哈.刚看到我迟到了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?

希望这可以帮助

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!