ng-class not responding to change in model in Angular?

Question

Having searched extensively, got some help from A ternary in templates and getting partially functional results, I'm 99% sure I'm doing it 99% right, but...obviously not completely, so I'm here.

The basic HTML structure:

<ul>
    <li class="week-row" ng-repeat="week in weeks" id="{{$index}}">
        <ul class="tiles" ng-class="{ 'expanded': week.isOpen, 'hidden': !week.isOpen }">
            <li class="day-tile"
                ng-class="{'active': (activeDay == $parent.$index + '-' + $index) }" 
                id="{{$parent.$index + '-' + $index}}" 
                ng-repeat="day in week.days" 
                ng-click="fn2({ week: $parent.$index, day: $index })">

               <!-- moved ng-class to here, and it works? -->
               <div>some stuff in here</div> 

            </li>
        </ul>
    </li>
</ul>

The stuff in the controller that sits above it:

$scope.activeDay = null;

$scope.fn1 = function() { $scope.activeDay = '0-0'; }; // this works, and sets the first one active

$scope.fn2 = function(data) { $scope.activeDay = data.week + '-' + data.day; }; // this sets the first one not active, but none of the others go active

I'm trying to set one of the nested list items to be active, based on its indexes in the nested arrays by using the $parent.$index and $index as a string, joined by '-'.

What's throwing me off is that console.logging $scope.activeDay, data.week + '-' + data.day, and both == and === comparisons come out exactly as I would expect, (the same strings, true, true) and it works on initial load when I set activeDay to '0-0', so I'm clearly missing something in my binding or...?

After finding this: https://egghead.io/lessons/angularjs-the-dot - I tried setting it up as an object so I couldn't get into some weird isolate scope nonsense: $scope.tiles = { activeDay: null }; and then setting that property from my functions, to no avail.

Why does setting it initially work, while changing it later does not? Is this improper binding of classes or...?

I also tried it with

class="day-tile {{activeDay == $parent.$index + '-' + $index ? 'active' : ''}}"

and that works initially, but breaks afterwards...

Your help is much appreciated!

UPDATE:

After moving ng-class="{'active': (activeDay == $parent.$index + '-' + $index) }" onto the div inside the ng-repeated .day-tile li, it works fine.

Any ideas why this might be?

And somehow by copy/pasting my updated code into plunkr, it works there...so clearly I'm having some different issues. — LouisK, Dec 06 '14 at 17:37

score 2 · Accepted Answer · answered Dec 06 '14 at 03:23

2

From the info you provided I have this working jsFiddle.

I removed the classes you were hard coding to true and stuck them in class="". The classes you were evaluating expressions for i put in ng-class="".

I attached your functions to $scope so ng-click could find them. So $scope.fn2 rather than var fn2.

Without knowing more details, I would say this should fix your problem.

Code Changes:

controller:

$scope.activeDay = null;

$scope.fn1 = function() { $scope.activeDay = '0-0'; };

$scope.fn2 = function(data) { $scope.activeDay = data.week + '-' + data.day; };

partial:

    <ul class="tiles" ng-class="{'expanded' : week.isOpen, 'hidden' : !week.isOpen}">
        <li class="day-title"
            ng-class="{'active': (activeDay == $parent.$index + '-' + $index)}" 
            id="{{$parent.$index + '-' + $index}}" 
            ng-repeat="day in week.days" 
            ng-click="fn2({ week: $parent.$index, day: $index })">
            //put expression here so you can see the list item
            {{week.day}}
        </li>
    </ul>

answered Dec 06 '14 at 03:23

Jacob Carter

711
5
12

Thanks, I'll try this when I get home in a bit. I did have fn1, fn2 on $scope, I just wrote those out in a rush, but this looks probably better than what I was doing. Thank you. – LouisK Dec 06 '14 at 03:30
So, for some reason setting the ng-class on the ng-repeated li was failing? I have a div inside that li which I put the ng-class on, and it works fine. Any ideas why that would be? – LouisK Dec 06 '14 at 17:52
The ngClass is failing in the fiddle or in your code? If it's yours can you make a fiddle? – Jacob Carter Dec 06 '14 at 17:57
It's failing in mine, when I started making a plunkr, it worked fine with what I copy/pasted :/ – LouisK Dec 06 '14 at 17:58
Okay sorry I'm having trouble understanding? So it works well in your plunkr but not the actually code? – Jacob Carter Dec 06 '14 at 17:59
Yes. Trust me, you're as confused as I am. Why it would work fine outside the system I'm working in, or by moving the ng-class from the li, to it's child div makes no sense to me. – LouisK Dec 06 '14 at 18:06

ng-class not responding to change in model in Angular?

UPDATE:

1 Answers1