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

Question

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

我计划的功能是这样的 - 如果您曾经按下过按钮，我想在您签名时向您展示 'black heart'。如果没有，您会看到 'white heart'.

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>

控制器

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) 如果您曾按下按钮，您只会看到 'one' 黑心。 (2) 如果没有，您会看到一个 'white heart'。我应该怎么办？我会很感激一些帮助。

Answer 1

摆脱你的 ng-repeat 而是将一个函数附加到 $scope returns 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 显示完整的心

Answer 2

与其使用创建 random, unique, chronological id 的 push()，不如使用用户的 uid 存储它们。

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

现在您可以参考用户的值来查看他们的标志是否应该打开或关闭。您可能还想保留喜欢的总数，这可以通过 transaction:

来完成

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

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

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

javascript

angularjs

firebase

ionic-framework

ionic