在angularJS中加载页面时默认选择第一个选项卡

Question

我有以下角度代码，用于以选项卡式格式显示学生信息。 以下是 student.html 类

<div class="panel panel-default">
    <ul class="nav nav-tabs">
        <li ng-repeat="studentTab in studentList"
            ng-class="{active: selectedStudentTab.name === studentTab.name}">
            <a ng-click="selectStudentTab(studentTab)">{{studentTab.name}}</a>
        </li>
    </ul>
    <div class="panel-body">
        <div class="tab-content">
            <div class="tab-pane active" ng-repeat="studentTab in studentList"
                ng-show="selectedStudentTab.name === studentTab.name">
                <div style="padding: 35px; text-align: left;">
                    <div ng-repeat="project in studentTab.projects">
                    <p><pre>{{project.log}}</pre></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在我的 studentController.js 中，我已将 studentList 的 oth 元素分配给选项卡，以下是代码：

$scope.init = function () {
    $rootScope.initOrRedirectToLandingPage($scope.loadStudents);
};

$scope.studentList = [];

$rootScope.loadStudents = function(){...
};

$scope.selectedStudentTab = $scope.studentList[0];

$scope.selectStudentTab = function (studentTab) {
        $scope.selectedStudentTab = studentTab;
};

此处的选项卡已正确创建，但默认情况下第一个选项卡在加载页面时未选中/处于活动状态，并且仅在单击事件时变为活动状态。 有人可以帮我弄清楚我错过了什么吗？任何帮助表示赞赏。

Answer 1

在您加载 studentList 后，在控制器中将 selectedStudentTab 分配给列表中的第一项。

$scope.studentList = [...];
$scope.selectedStudentTab = $scope.studentList[0];