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>

No problem, btw I did not add any commet to link, because explanation in that topic seems to be nice and clean :) — MSadura
– MSadura, Commented Jan 9, 2015 at 7:26

Kalhan · Accepted Answer · 2015-01-09 07:23:08Z

1

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

answered Jan 9, 2015 at 7:23

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

keyu bao · Accepted Answer · 2015-01-09 07:34:01Z

0

<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;
}

answered Jan 9, 2015 at 7:34

keyu bao

111 bronze badge

Comments

Praveen M P · Accepted Answer · 2015-01-09 13:54:43Z

0

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";

answered Jan 9, 2015 at 13:54

Praveen M P

11.7k7 gold badges37 silver badges41 bronze badges

Collectives™ on Stack Overflow

how to add class using angular js

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related