クリックするとfa-thumbs-upアイコン（または任意のフォントがすばらしいアイコン）の色が切り替わります

Question

フォントの素晴らしいサムネイルアイコンが画面に表示されます。私はクリックされたアイコンの色をトグルしたい。

どのように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>

私は角度のアプローチ（私はjQueryを使ってそれを達成しているが）と認識していないですので、申し訳ありませんが、私は（メソッドをクリックしてください）AngularJS一部を書いていません。

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-クリック。