Ionic 如果你曾经按过按钮,你会看到只有一个“黑色的心”,如果没有,你会看到一个'白色的心'

bkkx9g8r  于 2023-09-28  发布在  Ionic
关注(0)|答案(2)|浏览(187)

我是一个超级初学者谁刚刚开始离子框架和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"
        }
    }
}

联系我们

<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)如果你曾经按过按钮,你只会看到“一个”黑色的心。(2)如果没有,你会看到一个“白色的心”。我该怎么办?我会很感激你的帮助。

xtupzzrd

xtupzzrd1#

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

有一个过滤器,这样你就只能得到像.uid == authData.uid这样的结果,并有一个if results.length == 0,如果results,则显示空的心脏。length>0,则显示完整的心脏

368yc8dk

368yc8dk2#

不使用push()创建random, unique, chronological id,而只按用户的uid存储它们。

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

现在,您可以按用户引用这些值,查看其标志是打开还是关闭。您可能还希望保留喜欢的总数,这将通过交易完成:

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

相关问题