“选项卡的内容div”没有显示.我正在使用AngularJS来实现这一点

Question

参考Sergey Romanov 的答案

只显示垂直选项卡。。。当我使用他的代码时，tab content div从未显示过。这是我的代码

<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>

var NavController = function ($scope,$http) {       
   $scope.changeTab = function(tab) {
        $scope.view_tab = tab;
    }
};
NavController.$inject = ['$scope','$http'];
angular.module('publisherApp').controller('NavController', NavController);

Answer 1

对于引导tab content，您需要设置哪个选项卡处于活动状态：

var NavController = function($scope, $http) {
  $scope.changeTab = function(tab) {
    $scope.view_tab = tab;
  }
};
NavController.$inject = ['$scope', '$http'];
angular.module('app', []).controller('NavController', NavController);

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='NavController'>
  <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-class="{active: view_tab == 'tab1'}">
        This is tab 1 content
      </div>
      <div class="tab-pane" ng-class="{active: view_tab == 'tab2'}">
        This is tab 2 content
      </div>
    </div>
  </div>
</div>