angularjs 选项卡不切换？答案

【问题标题】：The angularjs tab don't switch?angularjs 选项卡不切换？
【发布时间】：2014-03-19 06:45:39
【问题描述】：

为什么标签不切换？当我单击选项卡 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>

【问题讨论】：

你的 JS 脚本在哪里？

标签： angularjs tabs

【解决方案1】：

这是因为您总是通过执行ng-class="{active: $index == 0}" 将第一个选项卡设置为活动状态。您需要将$index 与用户单击选项卡标题时更改的范围上的属性进行比较（通过结合锚点上的href 和ng-click）。类似这样的简化版本：http://jsbin.com/tesosisi/1/edit

该示例在控制器中设置了$scope.names.activeIndex = 0;，但您需要检查当前位置哈希以查看哪个选项卡应该从一开始就处于活动状态。

【讨论】：