angularjs - ng-class not working in ng-repeat -


i have ng-class doesn't seem adding class on initial load. looks function working perfectly, , outputting proper boolean, class doesn't add. if toggle value, updates expected.

<ul class="gb-talents-tiers">   <li class="clearfix" ng-repeat="tier in guide.tiers()">     <span>{{tier}}</span>     <ul class="gb-talents-icons clearfix">       <li ng-repeat="talent in guide.talentsbytier(hero.hero, tier) | orderby: talent.ordernum">         <a href="#" class="talents-icon {{hero.hero.classname}} {{talent.classname}}" ng-class="{ 'tier-selected': guide.hasanytalent(hero, talent), 'active': guide.hastalent(hero, talent) }" ng-click="guide.toggletalent(hero, talent)" hots-talent>{{talent.name}}</a>       </li>     </ul>   </li> </ul> 

the problem lies with:

ng-class="{ 'tier-selected': guide.hasanytalent(hero, talent), 'active': guide.hastalent(hero, talent) }" 

everything outputting expected except classes being added on inital load. when output "{{guide.hastalent(hero, talent)}}", returns true or false expected. if need more info, best.

edit: adding hastalent function

gb.hastalent = function (hero, talent) {   if (hero.talents['tier'+talent.tier] === talent._id) {     return true;   }   return false; }; 

added plunkr, seems work perfectly. fml. http://plnkr.co/edit/b8bum5wd5ftkyfkojfwr?p=preview

every iteration of ng-repeat creates new scope.

so, if want access property parent scope, need :

ng-class="{ 'tier-selected': $parent.guide.hasanytalent(hero, talent), 

Comments

Popular posts from this blog

javascript - AngularJS custom datepicker directive -

javascript - jQuery date picker - Disable dates after the selection from the first date picker -