[SOLVED] Binding class in a repeater

Binding class in a repeater

here's my html

<span class="" ng-repeat="font in model.fonts" >
    <a ng-click="model.value.HeadingFont = font" href="javascript:void(0);" ng-class="[font-bulb, {active: font==model.value.HeadingFont}]" style="font-family:{{font}};">Aa</a>
</span>

and in the controller

$scope.model.fonts = ["'Raleway', sans-serif", "'Open Sans', sans-serif", "'Oswald', sans-serif", "'Crimson+Text', sans-serif", "'Roboto', sans-serif"];

What I'm trying to do is display a link foreach font in the array. Onclick the value should be set on $scope.model.value.HeadingFont and the link should have the css classes "font-bulb" (always) and "active" if $scope.model.value.HeadingFont == {currentFont}

The value is set correctly, but the css classes do not apply; I've tryed different options but I cannot find the correct one.

Anyone can help with this?

Thank you

Solution

You could simply have it like below, place class="font-bulb" outside and then remaining conditional adding class logic will goes to ng-class directive.

Markup

<span class="" ng-repeat="font in model.fonts" >
  <a ng-click="model.value.HeadingFont = font" href="javascript:void(0);" class="font-bulb"
   ng-class="{active: font==model.value.HeadingFont}" style="font-family:{{font}};">
      Aa
  </a>
</span>