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

Question

我刚刚开始使用Angular,我仍然试图了解它是如何工作的.我有两个关于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的类设置为"active"

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

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

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

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