如何使用 Angular js 添加类答案

【问题标题】：how to add class using angular js如何使用 Angular js 添加类
【发布时间】：2015-01-09 07:20:29
【问题描述】：

我想在点击按钮后向 i 标签添加一个类。如何使用 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 标签中添加了 exampleClass

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

【问题讨论】：

stackoverflow.com/questions/14643836/…
@MarekSadura 谢谢
没问题，顺便说一句，我没有在链接中添加任何评论，因为该主题的解释似乎很好而且干净:)

标签： javascript angularjs

【解决方案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 类

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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";

【讨论】：