Search code examples
angularjsangular-directiveng-class

Make selected <a> bold when clicked inside nested ng-repeat

I want to make selected choice as bold. Here is the Plunker which I have created. I thought of putting ng-class='className' and then setting

$scope.className=selection

inside directive controller, but it got applied to all the elements. How to make clicked as bold and then when other option is selected, I want that previous selected to choice to drop that class and newly make newly selected option as bold.

.selection{
  font-weight: bold;
 }

I found SO link but for this i would have to create another directive and also I would have to handle the scenario where prev element to drop class and make newly selected element bold

Solution

  • You can use ng-class like:

    <a ng-class="{'selection': $parent.val == group.name}" ng-click="selectedVal(group.name)">{{group.name}} ({{group.count}})</a>

    Updated Plunkr: http://plnkr.co/edit/gyEAGo6Mb77DK7yFo8td?p=preview. Note that it works only for the top level elements.