how to add class using angular js

Question

I want to add a class to the i tag after clicking of button. how can I achieve this using angular js.

<button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare">
   <i class="fa fa-thumbs-o-up"></i>
</button>


 $scope.countLikes = function (e) {
      console.log(e);
  }

I wanted output like this. Added exampleClass to the i tag

    <button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare">
   <i class="fa fa-thumbs-o-up exampleClass"></i>
</button>

http://stackoverflow.com/questions/14643836/dynamic-class-in-angular-js — MSadura, Jan 09 '15 at 07:23
No problem, btw I did not add any commet to link, because explanation in that topic seems to be nice and clean :) — MSadura, Jan 09 '15 at 07:26

score 1 · Answer 1 · answered Jan 09 '15 at 07:23

use ng-class directive

<i class="fa fa-thumbs-o-up" ng-class="{'exampleClass' : buttonClicked}"></i>

$scope.countLikes = function (e) {
      $scope.buttonClicked = true;
      console.log(e);
}

when buttonClicked is true i element will get the exampleClass css class

score 0 · Answer 2 · answered Jan 09 '15 at 07:34

<button type="button" title="Like" ng-click="countLikes(product.title)" class="btn btn-compare">
   <i class="fa fa-thumbs-o-up" ng-class="{'exampleClass': isClick}"></i>
</button>

$scope.isClick = false;
$scope.countLikes = function (e) {
    $scope.isClick = true;
}

score 0 · Answer 3 · answered Jan 09 '15 at 13:54

Here is my answer

<button type="button" title="Like"  class="btn btn-compare" ng-click="(myLike = myLike === 'fa-thumbs-o-up' ? 'fa-thumbs-up' : 'fa-thumbs-o-up'); countLikes(product.title)";>
    <i class="fa" ng-class="myLike"></i>
</button>

 $scope.myLike = "fa-thumbs-o-up";

how to add class using angular js

3 Answers3