Question

I am just getting started with Angular and am still trying to get a feel for how it works. I have 2 questions about a list with ng-repeat. I will post my code first.

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>

Controller

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){

    }
}

Ok, this pulls the data just fine. I can click on a class and it loads the students in that class. To cut down on AJAX calls, I store those that are clicked and if that class is clicked again, it will fetch it from memory instead of making the call. This is fine as class rosters are static for the most part.

I am trying to have it load a default class roster (the first alphabetically) and mark just that list item as active.

Secondly, when they click a list item, I want to change that list item to active, and change the class of the other ones back to nothing. I am not sure how to do that either. As it stands, none are active now, but when I click one, all become active.

Answer 1

in Html ng-class, if class_id matches $scope.activeClass set class of li to “active”

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

in Controller when $scope.loadRoster is called set $scope.activeClass to class_id of the class passed to function

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

for your default active class just set $scope.activeClass to class_id of the class