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

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

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

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

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

<panel><tabs-headings><tabs-bodIEs>

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

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

<tabs-heading><panel><tabs-bodIEs>

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

谢谢

解决方法 编辑：哈哈.刚看到我迟到了10个月.

我刚碰到你正在谈论的内容.如果使用ng-repeat动态渲染每个选项卡中的内容,则可以避免重复使用侧面板多次.

<div >    <uib-tabset>    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.Title}}" disable="tab.Disabled">      <div >{{tab.sIDepanel}}</div>       <div >{{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  ui-vIEw></div>        <div >{{tab.content}}</div>        </uib-tab>      </uib-tabset>    </div>

sIDepanel.tpl.HTML

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

也可以看看：
what is the purpose of use abstract state?

希望这可以帮助

总结

以上是内存溢出为你收集整理的html – 如何使用angularjs将标签标题与其主体分开？全部内容，希望文章能够帮你解决html – 如何使用angularjs将标签标题与其主体分开？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。