AngularJS - 单击时更改列表中的类

Question

我刚刚开始使用 Angular，并且仍在尝试了解它的工作原理。我有 2 个关于 ng-repeat 列表的问题。我会先发布我的代码。

HTML

<div class="row">
    <div class="span2">
        <ul class="nav nav-pills nav-stacked">
            <li ng-repeat="class in classes | orderBy:orderProp" ng-class="activeClass">
                <a ng-click="loadRoster(class)">{{class.class_name}}</a>
            </li>
        </ul>
    </div>
    <div class="span2">
        <ul class="nav nav-pills nav-stacked">
            <li ng-repeat="student in students | orderBy:orderProp">
                <a ng-click="enterPassword(student)">{{student.student_name}}</a>
            </li>
        </ul>
    </div>
</div>

控制器

function ClassListCtrl($scope, $http) {
    $scope.loadedList=[];
    $scope.students=[];
    $scope.activeClass='';
    $scope.orderProp = 'alphabetical';

    $http.get('data/class.json').success(function(data) {
        $scope.classes = data;
    });

    $scope.loadRoster=function(classlist){
        $scope.selectedClass=classlist;
        $scope.activeClass='active';
        if($scope.loadedList[classlist.class_id]== undefined){
            $http.get('data/class_'+classlist.class_id+'.json').success(function(data){
                $scope.loadedList[classlist.class_id]=data;
                $scope.students=data;
            });
        }
        $scope.students=$scope.loadedList[classlist.class_id];
    }

    $scope.studentClick=function(student){

    }
}

好的，这可以很好地提取数据。我可以点击一个班级，它会加载该班级的学生。为了减少 AJAX 调用，我存储了那些被单击的调用，如果再次单击该类，它将从内存中获取它而不是进行调用。这很好，因为班级名单大部分是静态的。

我正在尝试让它加载一个默认类名册（按字母顺序排列的第一个）并将该列表项标记为活动。

其次，当他们单击一个列表项时，我想将该列表项更改为活动状态，并将其他项的类更改为空。我也不知道该怎么做。就目前而言，现在没有一个是活跃的，但是当我点击一个时，所有的都变成活跃的。

Answer 1

在 Html ng-class 中，如果 class_id 与 $scope.activeClass 匹配，则将 li 的类设置为“活动”

<li ng-repeat="class in classes | orderBy:orderProp" ng-class="{'active':class.class_id == activeClass}">

在调用 $scope.loadRoster 时在 Controller 中将 $scope.activeClass 设置为传递给函数的类的 class_id

$scope.loadRoster=function(classlist){
    $scope.selectedClass=classlist;
    $scope.activeClass=classlist.class_id;

对于您的默认活动类，只需将 $scope.activeClass 设置为该类的 class_id