Цвет значка переключателя fa-thumbs-up (или любой значок шрифта)

0

У меня на экране есть несколько значков с большими значками шрифтовой 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).

Теги:
font-awesome

1 ответ

2
Лучший ответ

Вы можете просто использовать директивы 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.

Поделиться
  • 0
    Спасибо @Fatih за ваш ответ. Извините, но это не работает. Ни для одного значка, ни для нескольких. Было бы здорово, если бы вы предоставили jsfiddle.
  • 0
    Вот ручка: codepen.io/ftkurt/pen/QKbjRb
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню