Change color of specific glyphicon when clicked using Angular

Question

I would like to change the color of the specific glyphicon clicked in my Angular app.

For example when this is clicked:

(in ng-repeat block) <span class="glyphicon glyphicon-thumbs-down" ng-click="downvote(post)" ></span>

When clicked it calls:

$scope.downvote = function(post) {
    posts.downvote(post);   
    }
};

Thank you.

Answer 1

You can set a property on the post:

$scope.downvote = function(post) {
    posts.downvote(post);
    post.hadDownvote = true;
};

Then check the property in an ng-style attribute:

<span ng-style="post.hadDownvote ? {color:'red'} : {}" class="glyphicon glyphicon-thumbs-down" ng-click="downvote(post)"></span>

Naturally, for release you may prefer to use a CSS class defined elsewhere and perform the same check with ng-class to add the class.