AngularJS - 单击时更改列表的类

13 浏览
0 Comments

AngularJS - 单击时更改列表的类

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

HTML

控制器

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调用，我将已点击的班级存储起来，如果再次点击该班级，它将从内存中获取而不是进行调用。这对于班级名单来说是可以接受的，因为它们大部分是静态的。

我试图让它加载一个默认的班级名单（按字母顺序排列的第一个），并将那个列表项标记为活动状态。

其次，当他们点击一个列表项时，我想将该列表项设置为活动状态，并将其他列表项的类更改为无。我也不确定如何做到这一点。目前，没有一个列表项是活动的，但是当我点击一个时，所有列表项都变成活动状态。

0

1 答案

0 Comments

问题的出现原因：

问题出现的原因是在ng-class中，当class_id与$scope.activeClass匹配时，将li的class设置为"active"。在控制器中，当调用$scope.loadRoster函数时，将$scope.activeClass设置为传递给函数的class的class_id。对于默认的活动类，只需将$scope.activeClass设置为class的class_id。

解决方法：

问题可能是所有的li都变成了活动状态。这是循环吗？花名册在哪里？

0