AngularJS - Change class on list when clicked

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.

"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." The $http service can do the caching for you: stackoverflow.com/questions/14117653/… — Mark Rajcok
– Mark Rajcok, Commented Jan 9, 2013 at 23:26
Awesome. Did not know that, but tried it and it works wonderfully. — Tim Withers
– Tim Withers, Commented Jan 9, 2013 at 23:37

Jason Als · Accepted Answer · 2013-01-09 23:06:16Z

6

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

answered Jan 9, 2013 at 23:06

Jason Als

7234 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

charliemagee Over a year ago

Something's not obvious. All my li's turn active. Isn't this a loop? Where's the roster?

Collectives™ on Stack Overflow

AngularJS - Change class on list when clicked

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related