Question

我在屏幕上有多个font-awesome库的竖起大拇指图标。我想切换点击图标的颜色。

如何在AngularJS中完成？

＆＃13;

.liked{
  color:#0000ff;
}

.not-liked{
  color:#888;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="" ng-controller="">
<a href="#" ng-click="" class="not-liked">
  <i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>

＆＃13;

抱歉，我还没有编写AngularJS部分（单击方法），因为我不了解Angular方法（尽管我已经用jQuery实现了它）。

Answer 1

您只需使用 ng-click 和 ng-class 指令。

.liked{
  color:#0000ff;
}

.not-liked{
  color:#888;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="" ng-controller="">
<a href="#" ng-class="{'not-liked':!liked,'liked':liked}" ng-click="liked=!liked">
  <i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>

修改：删除了额外的ng-click。

单击时切换fa-thumbs-up图标（或任何字体 - 真棒图标）颜色

1 个答案: