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的类设置为＆＃34; active＆＃34;

<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

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

1 个答案: