If you've ever pressed the button, you'll see just 'one' black heart. If not, you'll see one 'white heart'

I'm a super beginner who just starting ionic Framework & Firebase. I know that there are many problems in the code that I wrote. However, please excuse me cuz I'm still in learning.

The function that I planned is this - If you've ever pressed the button, I wanna show you the 'black heart' when you signed it. If not, you'll see the 'white heart'.

firebase structure

comments{
    message: "hi~",
    user: "user name",
    userId: "user Id",
    userImgURI: "https://fbcdn-profile-a.akamaihd.net/hprofile-a..",
    like{
        -JmvN2CHvAOcBQCp2r0{
            uid: "facebook:69843548512"
        }
    }
}

html

<div class="item item-avatar item-icon-right" ng-repeat="comment in comments">
  <img ng-src="{{comment.userImgURI}}">
  <span class="commentUserName"><b>{{comment.user}}</b></span>
  <span class="commentMessage">{{comment.message}}</span>
  <i class="icon ion-chevron-right ion-trash-a" ng-show="comment.userId == authData.uid" ng-click="removeComment(comment.$id)"></i>
  <div ng-if="comment.like == null">
    <button ng-click="likeFunction({{comment}})" class="button button-light ion-ios-heart-outline likeBt"></button>
  </div>
  <div ng-repeat="like in comment.like">
    <div ng-if="like.uid == authData.uid">
      <button onclick="alert('You have already like.')" class="button button-light ion-heart"></button>
    </div>
    <div ng-show="like.uid != authData.uid">
      <button ng-click="likeFunction(comment)" class="button button-light ion-ios-heart-outline likeBt"></button>
    </div>
  </div>
</div>

controller

var commentsRef = new Firebase('https://choifirstproject.firebaseio.com/products/' + $scope.selectProductKey + '/comments');
$scope.comments = $firebaseArray(commentsRef);

$scope.likeFunction = function (comment) {
  var ref = new Firebase('https://choifirstproject.firebaseio.com/products/' + $scope.selectProductKey + '/comments/' + comment.$id);
  if ($rootsScope.authData) {
    ref.child('like').push({
      uid: $rootScope.authData.uid
    });
  }else{
    alert('Please login..');
  }
}

The problem

The problem is this. There's no problem if one user pressed the heart button. But when more than two users pressed it, the following problem happens. The output of heart button is duplicated as many as the number of peaple who pressed the button. I just want this; (1) If you've ever pressed the button, you'll see just 'one' black heart. (2) If not, you'll see one 'white heart'. What should I do? I'd appreciate some help.

Get rid of your ng-repeat instead attach a function to the $scope that returns true if the current user has pressed on the heart. (Use the same logic as you do in your ng repeat but in plain java script) Then use ng-show ng-hide using the function that you wrote to decide which heart to show.

Alternatively you could do something like this :

<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
  [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
</li>
<li class="animate-repeat" ng-if="results.length == 0">
  <strong>No results found...</strong>

Have a filter so that you only get results of like.uid == authData.uid and have an if results.length == 0 show the empty hart if results.length>0 show the full heart

Rather than using push(), which creates a random, unique, chronological id, just store them by the users' uid.

ref.child('like').child($rootScope.authData.uid).set(true);

Now you can refer to the values by user to see if their flag should be on or off. You'll probably also want to keep a total count of likes and that would be done with a transaction:

 ref.child('total_likes').transaction(function(currentValue) {
    return (currentValue||0)+1;
 });