如何使用角度js添加类

Question

我想在点击按钮后为i标签添加一个类。如何使用角度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);
  }

我想要这样的输出。将exampleClass添加到i标签

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

Answer 1

使用ng-class指令

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

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

当buttonClicked为真时i元素将获得exampleClass css类

Answer 2

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

Answer 3

这是我的回答

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