我是一个超级初学者谁刚刚开始离子框架和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)如果没有,你会看到一个“白色的心”。我该怎么办?我会很感激你的帮助。
2条答案
按热度按时间xtupzzrd1#
去掉ng-repeat,而是在$scope上附加一个函数,如果当前用户按下了心脏,该函数将返回true。(使用与ng repeat相同的逻辑,但使用普通的java脚本)然后使用ng-show ng-hide,使用您编写的函数来决定显示哪个心脏。
或者,你可以这样做:
有一个过滤器,这样你就只能得到像.uid == authData.uid这样的结果,并有一个if results.length == 0,如果results,则显示空的心脏。length>0,则显示完整的心脏
368yc8dk2#
不使用push()创建random, unique, chronological id,而只按用户的uid存储它们。
现在,您可以按用户引用这些值,查看其标志是打开还是关闭。您可能还希望保留喜欢的总数,这将通过交易完成: