AngularJS - Change multiple CSS classes on 1 <div> from multiple options

Question

I'm afraid I'm new to Angular and therefore my knowledge is limited. I'm hoping there is an easy solution to this and I'd very grateful for any help.

Problem: I have multiple dropdown lists all populated with data from a $scope.list and when one of the lists is clicked, it updates the variables $scope.current. I'm hoping to use the $scope.current array data in a container class elsewhere.

Code:

// ANGULAR

Set the current item
$scope.current = {
    'activeClass1': 'initial-class1',
    'activeClass2': 'initial-class2'
};

Populate the lists
$scope.itemsList1 = [
    {'name': 'foo1'},
    {'name': 'foo2'},
    {'name': 'foo3'}
];

$scope.itemsList2 = [
    {'name': 'bar1'},
    {'name': 'bar2'},
    {'name': 'bar3'}
];

HTML LIST 1

<ul class="dropdown-menu" role="menu">
   <li ng-repeat="item in itemList1">
     <a href="#" ng-click="current.activeClass1=item.name;>{{item.name}}</a>
   </li>
</ul>

HTML LIST 2

<ul class="dropdown-menu" role="menu">
   <li ng-repeat="item in itemList2">
     <a href="#" ng-click="current.activeClass2=item.name;>{{item.name}}</a>
   </li>
</ul>

// HTML TO UPDATE WHEN ABOVE LISTS ARE CLICKED

<div class="container" ng-class="{{current.activeClass1}} {{current.activeClass2}}">
    Note: two classes need to be added to the parent and kept updated 
</div>

// OUTPUT Only initial 'container' class present.

// UPDATE Thanks to the answers given, the jsFiddle showed that it should be working, but my problem was that ng-view was causing problems with my $scope - as soon as separated those dynamic classes and the ng-view, everything worked. Thanks again!

bingjie2680 · Accepted Answer · 2014-03-14 19:29:33Z

1

You have two extra closing curly braces in your code. this works: http://jsfiddle.net/s7AK7/

$scope.current = {
    'activeClass1': 'initialClass',
    'activeClass2': 'initialClass'
};

$scope.itemsList1 = [
    {'name': 'item1'},
    {'name': 'item2'},
    {'name': 'item3'}
];

$scope.itemsList2 = [
    {'name': 'item1'},
    {'name': 'item2'},
    {'name': 'item3'}
];

answered Mar 14, 2014 at 19:29

bingjie2680

7,7839 gold badges50 silver badges72 bronze badges

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

1 Comment

thathurtabit Over a year ago

Thanks for this, I'm not sure why your jsFiddle is working, but my real-world code isn't. Hmm. I'm sure I'll figure it out and give you the accepted answer.

StuR · Accepted Answer · 2014-03-14 19:22:07Z

1

Try doing:

ng-class="[current.activeClass1, current.activeClass2]"

answered Mar 14, 2014 at 19:22

StuR

12.3k9 gold badges47 silver badges66 bronze badges

1 Comment

thathurtabit Over a year ago

Thanks for responding. This adds the classes initially, but if the lists are clicked and updated, the classes on the container don't get updated.

Collectives™ on Stack Overflow

AngularJS - Change multiple CSS classes on 1 <div> from multiple options

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related