Aktiv auf Angularjs Bootstrap Registerkarte mit statischem Inhalt

Question

Ich benutze Angular Bootstrap UI, um eine Registerkarte mit statischen Inhalten anzuzeigen.

Ich war frustriert, weil die UI Bootstrap Tab Dokumentation nur die Navigation zu Tabs zeigt, die durch Bindung mit ng-repeat erstellt wurden.

<uib-tabset> 
     <uib-tab heading="Basic Details"> 
      <div role=" tabpanel" class="tab-pane active" id="basicDetails"> 
      tab1 
      <button class="btn btn-success" ng-click="$parent.tabs[1].select()">Go to Tab 3</button> 
      </div> 
     </uib-tab> 
     <uib-tab heading="Basic Details"> 
      <div role=" tabpanel" class="tab-pane active" id="basicDetails"> 
      tab2 
      </div> 
     </uib-tab> 
    </uib-tabset> 

fand ich etwas, was Stackoverflow hören, aber das ist nicht mit der aktuellen Version von Angular Bootstrap UI arbeiten ..

Plunker

Answer 1

eine Registerkarte als aktiv zu setzen, müssen Sie eine boolean-Flag setzen auf Ihrem Bereich auf "wahr" und verknüpfen Sie es mit dem angegebenen Tab active Attribut. dies würde aussehen wie

<uib-tabset> 
    <uib-tab heading="Basic Details" active="tabOneActive"> 
     tab1 
    </uib-tab> 
    <uib-tab heading="Other Details" active="tabTwoActive"> 
     tab2 
    </uib-tab> 
</uib-tabset> 

wenn tabOneActive auf true gesetzt ist, wird der erste Registerkarte

Answer 2

ich nicht sicher gezeigt werden, bin dies die sauberste Lösung, aber ich endete mit manuell Einschalten Tabs per Klick Überschriften:

<uib-tabset> 
    <uib-tab heading="h1" active="h1Active" ng-click="h1Active=true"> 
    ... content 1 
    <uib-tab> 
    <uib-tab heading="h2" active="!h1Active" ng-click="h1Active=false"> 
    ... content 2 
    <uib-tab> 
</uib-tabset> 

Ich habe hier nur zwei Registerkarten, und eine Variable reicht, um zwischen zu wechseln. Aber im Fall von mehr Tabs denke ich, dass Sie nur ein wenig komplizierteres Login beim Klick implementieren müssen. Ich meine, wahrscheinlich, setzen Sie einen auf wahr und andere auf falsch.