サイドバーのUIブートストラップタブを実装する

Question

私はAngularJSでUIブートストラップを使用していますが、col-md-2とcol-md-10を使用して縦タブをサイドバーに分割しようとしています。

は現在、私は...私が持っていると思います

<div active="activePill" vertical="true" type="pills" class="ng-isolate-scope"> 
    <ul class="nav nav-pills nav-stacked" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude=""> 
     <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope active" heading="Tab 1"> 
      <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 1</a> 
     </li> 
     <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" heading="Tab 2"> 
      <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 2</a> 
     </li> 
     <li ng-class="[{active: active, disabled: disabled}, classes]" class="uib-tab nav-item ng-scope ng-isolate-scope" heading="Builds"> 
      <a href="" ng-click="select($event)" class="nav-link ng-binding" uib-tab-heading-transclude="">Tab 3</a> 
     </li> 
    </ul> 
    <div class="tab-content"> 
     <!-- ngRepeat: tab in tabset.tabs --> 
     <div class="tab-pane ng-scope active" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab"> 
      <span class="ng-scope">Vertical content 1</span> 
     </div> 
     <!-- end ngRepeat: tab in tabset.tabs --> 
     <div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab"> 
      <span class="ng-scope">Vertical content 2</span> 
     </div> 
     <!-- end ngRepeat: tab in tabset.tabs --> 
     <div class="tab-pane ng-scope" ng-repeat="tab in tabset.tabs" ng-class="{active: tabset.active === tab.index}" uib-tab-content-transclude="tab"> 
      <span class="ng-scope">Vertical content 3</span>  
     </div> 
     <!-- end ngRepeat: tab in tabset.tabs --> 
    </div> 
</div> 

出力

<uib-tabset active="activePill" vertical="true" type="pills"> 
    <uib-tab heading="Tab 1">Vertical content 1</uib-tab> 
    <uib-tab heading="Tab 2">Vertical content 2</uib-tab> 
    <uib-tab heading="Tab 3">Vertical content 3</uib-tab> 
</uib-tabset> 

... ... ...

<div active="activePill" vertical="true" type="pills" class="ng-isolate-scope"> 
    <ul class="nav nav-pills nav-stacked col-md-2" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude=""> 
    <!-- snip --> 
    </ul> 
    <div class="tab-content col-md-10"> 
    <!-- snip --> 
    </div> 
</div> 

は（追加を持っていますcol-md-2およびcol-md-10）

Answer 1

私のチームは一度のタックこれを主導して、私はあなたが側にそれを置くことはできないと思っています（ディレクティブの構造と関係しているので）。権利。

<div class="col-sm-2"> 
    <uib-tabset active="active" vertical="true" type="pills"> 
    <uib-tab heading="Tab 1" select="selected(1)"></uib-tab> 
    <uib-tab heading="Tab 2" select="selected(2)"></uib-tab> 
    <uib-tab heading="Tab 3" select="selected(3)"></uib-tab> 
    </uib-tabset> 
</div> 
<div class="col-sm-10"> 
    <div ng-show="selectedView===1"> 
    Show what tab 1 is selected 
    </div> 
    <div ng-show="selectedView===2"> 
    Show what tab 2 is selected 
    </div> 
    <div ng-show="selectedView===3"> 
    Show what tab 3 is selected 
    </div> 
</div> 

Sample plunker

これは、もちろん単純化した場合で、私たちがやったことは、それより「本物」のnav-バー作られたもの、右側の異なる状態を示すために、ui-routerを使用して、だったと私たちは」didnの醜い<div ng-show="selectedView===#">マークアップの部分を繰り返す必要があります。