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的另一个元素分配给了选项卡，下面是代码：

$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];

在将页面加载到angularJS中时，默认情况下选择第一个选项卡

1 个答案: