我在屏幕上有多个font-awesome库的大拇指图标。我想切换被点击的图标的颜色。
如何在AngularJS中实现?
.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-click="" class="not-liked">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
</a>
</div>
对不起,我没有写AngularJS部分(点击方法),因为我不知道与Angular的方法(虽然我已经实现了它与jQuery)。
您可以简单地使用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。