AngularJSでスターレイティング(星の評価）する方法

よくある☆による評価のコードです。

Add/Deleteボタンを使いましたが、イベントをフックする方法が色々あると思います。 unshift, shift, push and popを使ってfontawesomeのClassを書き換えてます。

in View

Recommended!
<button class="btn btn-warning btn-sm" ng-click="recommendDelete()"><i class="fa fa-minus"></i></button>
<button class="btn btn-info btn-sm" ng-click="recommendAdd()"><i class="fa fa-plus"></i></button>
<br>
 <span ng-repeat="star in photo.recommended track by $index"> <i style="color: #ff6600" class="fa {{ photo.recommended[$index] }}"></i> </span>
</span>

in Controller

        $scope.photo.recommended 
            = ['fa-star-o', 'fa-star-o', 'fa-star-o', 'fa-star-o', 'fa-star-o']; 
            
        $scope.recommendAdd = function(){
            $scope.photo.recommended.unshift('fa-star');
            $scope.photo.recommended.pop();
        }
        $scope.recommendDelete = function(){
            $scope.photo.recommended.push('fa-star-o');
            $scope.photo.recommended.shift();
        }
        
        $scope.donePhotoSelection = function(){
            var recommenedCount = 0;
            $scope.photo.recommended.forEach(function(value){
                if ( value === 'fa-star'){
                    recommenedCount++;
                }
            });
           // the other code there
         };