angularjs選項卡不能切換？

Question

爲什麼選項卡不能切換？當我點擊標籤2或其他時，它似乎什麼都不做。

<div class="container"> 
    <h1>Bootstrap AngularJS Tabs</h1> 
    <div ng-app=""> 
    <div ng-init="names = [{name:'one'}, {name:'two'}, {name:'three'}, {name:'four'}, {name:'five'}]"> 
      <ul class="nav nav-tabs"> 
        <li ng-repeat="name in names" ng-class="{active: $index == 0}"> 
     <a href="#tab{{$index + 1}}" data-toggle="tab">Tab {{$index + 1}}</a> 
        </li> 
      </ul> 
    <div class="tab-content"> 
    <div class="tab-pane fade in" id="tab{{$index + 1}}" ng-repeat="name in names" ng-class="{active: $index == 0}"> 
     <span>{{$index + 1}}</span><span>{{$index+2}}</span> 
    </div> 
      </div> 

      </div> 
      </div> 
    </div><!--/container--> 
    <script src="./angular.min.js"></script> 
    <script src="./bootstrap.min.js"></script> 

Answer 1

這是因爲您總是通過執行ng-class="{active: $index == 0}"將第一個選項卡設置爲活動狀態。您需要將$index與您在用戶單擊標籤標題時更改的範圍（通過組合錨點上的href和ng-click）進行比較。類似這樣的簡化版本：http://jsbin.com/tesosisi/1/edit

該示例在控制器中設置$scope.names.activeIndex = 0;，但您希望檢查當前位置散列以查看哪個標籤應該從一開始就處於活動狀態。