javascript - 如果您曾经按下过该按钮，您只会看到 'one' 黑心。如果没有，您将看到一个 'white heart'

Question

我是一个 super 初学者，刚刚开始使用 ionic Framework 和 Firebase。我知道我写的代码有很多问题。不过，请原谅我，因为我还在学习中。

我计划的功能是这样的 - 如果你曾经按下过这个按钮，我想向你展示你签名时的“黑心”。如果没有，您会看到“白心”。

firebase结构

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..');
  }
}

问题

问题是这样的。如果一位用户按下心形按钮，就没有问题。但是当两个以上的用户按下它时，就会出现以下问题。心形按钮的输出与按下该按钮的人数一样多。我只想要这个；(1) 如果您曾经按下过按钮，您只会看到“一颗”黑心。(2) 如果没有，您会看到一颗“白心”。我应该怎么办？我希望得到一些帮助。

Answer 1

摆脱你的 ng-repeat ，而是将一个函数附加到 $scope ，如果当前用户按下了心脏，则该函数返回 true 。 (使用与 ng Repeat 中相同的逻辑，但在纯 java 脚本中)然后使用 ng-show ng-hide 使用您编写的函数来决定显示哪颗心。

或者你可以这样做:

<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>

有一个过滤器，以便您只获得 like.uid == authData.uid 的结果并有一个 if results.length == 0 显示空心 if results.length>0 显示完整的心