angularjs - Angular UI Bootstrap 垂直选项卡

Question

使用 Angular UI Bootstrap，我们如何构建与看起来像这样的选项卡内容左对齐的垂直堆叠选项卡？

Answer 1

另一种解决方案是创建这样的东西

<div class="row">
<div class="col-sm-3">
    <ul class="nav nav-tabs nav-stacked nav-pills" role="tablist">
        <li ng-class="{'active': view_tab == 'tab1'}">
            <a class="btn-lg" ng-click="changeTab('tab1')" href="">My Tab 1</a>
        </li>
        <li ng-class="{'active': view_tab == 'tab2'}">
            <a class="btn-lg" ng-click="changeTab('tab2')" href="">My Tab 2</a>
        </li>
    </ul>
</div>
<div class="col-sm-9">
    <div class="tab-content">
        <div class="tab-pane" ng-show="view_tab == 'tab1'">
            This is tab 1 content
        </div>
        <div class="tab-pane" ng-show="view_tab == 'tab2'">
            This is tab 2 content
        </div>
    </div>
</div>
</div>

以及如何在 JS 中

$scope.changeTab = function(tab) {
    $scope.view_tab = tab;
}

在这样的方法中，我可以更好地控制 HTML 标记。