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


having searched extensively, got a ternary in templates , getting partially functional results, i'm 99% sure i'm doing 99% right, but...obviously not completely, 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 here, , works? -->                <div>some stuff in here</div>               </li>         </ul>     </li> </ul> 

the stuff in controller sits above it:

$scope.activeday = null;  $scope.fn1 = function() { $scope.activeday = '0-0'; }; // works, , sets first 1 active  $scope.fn2 = function(data) { $scope.activeday = data.week + '-' + data.day; }; // sets first 1 not active, none of others go active 

i'm trying set 1 of nested list items active, based on indexes in nested arrays using $parent.$index , $index string, joined '-'.

what's throwing me off console.logging $scope.activeday, data.week + '-' + data.day, , both == , === comparisons come out expect, (the same strings, true, true) , works on initial load when set activeday '0-0', i'm missing in binding or...?

after finding this: https://egghead.io/lessons/angularjs-the-dot - tried setting object couldn't weird isolate scope nonsense: $scope.tiles = { activeday: null }; , setting property functions, no avail.

why setting work, while changing later not? improper binding of classes or...?

i tried

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

and works initially, breaks afterwards...

your appreciated!

update:

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

any ideas why might be?

from info provided have working jsfiddle.

i removed classes hard coding true , stuck them in class="". classes evaluating expressions put in ng-class="".

i attached functions $scope ng-click find them. $scope.fn2 rather var fn2.

without knowing more details, should fix 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 can see list item             {{week.day}}         </li>     </ul> 

Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -