Javascript 防止多次向上投票
首先,我为我的英语感到抱歉。Javascript 防止多次向上投票,javascript,angularjs,Javascript,Angularjs,首先,我为我的英语感到抱歉。 我对这个问题进行了一些搜索,但没有任何东西适合我。 我的问题很简单: 我有一个向上投票系统,用户可以向上投票(如Stackoverflow)。但问题是,用户可以多次向上投票(这不是很好……)。 我试图制作一个禁用ng的按钮,但如果我这样做,用户只能对所有帖子投一次票(我的意思是,如果他们对“帖子a”投了更高的票,他们就不能对“帖子B”投更高的票)。 以下是我的控制器功能: $scope.incrementUpvotes = function(post) {
我对这个问题进行了一些搜索,但没有任何东西适合我。
我的问题很简单:
我有一个向上投票系统,用户可以向上投票(如Stackoverflow)。但问题是,用户可以多次向上投票(这不是很好……)。
我试图制作一个禁用ng的按钮,但如果我这样做,用户只能对所有帖子投一次票(我的意思是,如果他们对“帖子a”投了更高的票,他们就不能对“帖子B”投更高的票)。
以下是我的控制器功能:
$scope.incrementUpvotes = function(post) {
posts.upvote(post);
};
o.upvote = function(post){
return $http.put('/posts/' + post._id + '/upvote', null, {
headers: {Authorization: 'Bearer '+auth.getToken()}
}).success(function(data){
post.upvotes += 1;
});
};
以下是我的工厂功能:
$scope.incrementUpvotes = function(post) {
posts.upvote(post);
};
o.upvote = function(post){
return $http.put('/posts/' + post._id + '/upvote', null, {
headers: {Authorization: 'Bearer '+auth.getToken()}
}).success(function(data){
post.upvotes += 1;
});
};
这里是html:
<span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span>
如果有人能帮我,那就太好了!提前谢谢 请尝试使用
按钮
或输入
而不是span
。因为禁用的在span
中不起作用
<button id="{{ post._id + 'upvote' }}" class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></button>
在模板中,当您迭代帖子时,为每个帖子设置一个标志,标识它是否已被提升投票
在upvote
函数中,将该标志标记为true,并在ng disabled
指令中使用它,如下所示:
ng-disabled={{post.isUpvoted}}
这是一个架构问题,而不是javascript/angularjs问题。有很多方法可以做到这一点。但这个想法是存储在数据库中并持久化upvote信息,否则用户只需刷新页面并再次upvote
最直接的解决方案是:您必须在用户级别的后端存储您的投票信息。当您查询用户信息时,存储一个向上投票的帖子列表,如下所示:
myDataService
应该如下所示:
angular.module("app", []).service("myDataService", ["$http","$q","$rootScope", function myDataService($http, $q, $rootScope) {
var myDataService = this;
myDataService.getPostsUpvoted = function(userId) {
var defer = $q.defer();
//here you format your payload to deliver userId to the api backend
var payload = { userId: userId };
//your api backend 'getpostsupvoted' should accept a userId, then in return it should
//deliver a list of posts upvoted by that user
$http.post("/api/getpostsupvoted", payload).then(function (data, status, headers, config) {
//call success
defer.resolve(data);
}, function(data, status, headers, config) {
//an error occurred
defer.reject(data);
});
return defer.promise;
}
return myDataService;
})];
然后,这就是如何在控制器中使用服务
//inject scope and myDataservice into controller
angular.module("app", []).controller("MainCtrl", ["$scope", "myDataService", function($scope, myDataService) {
//create a new array to hold a list of upvotes
$scope.user.upVoted = [];
myDataService.getPostsUpvoted($scope.user.id).then(function(data) {
//set upvoted array to data
$scope.user.upVoted = data;
}, function(error) {
//blah an error occurred
});
})];
在控制器中,提供一个函数来检查帖子是否已被升级
$scope.IsUpvotedAlready = function(postId) {
if($scope.user.upVoted.indexOf(postId) > -1)
return true;
return false;
}
您还必须将post.\u id推送到向上投票的数组,并将其保留在那里
$scope.incrementUpvotes = function(post) {
//check if it's already been upvoted, then do nothing
if($scope.user.upVotes.indexOf(post._id) > -1)
return;
posts.upvote(post);
$scope.user.upVoted.push(post._id);
};
然后,在显示帖子的ng repeat指令中,检查UPVOLUES列表是否包含帖子id
<div ng-repeat="post in posts">
<div ng-if="IsUpvotedAlready(post._id)">
<!-- display something since already upvoted !-->
</div>
{{ post }}
</div>
{{post}}
我相信你已经知道了这一点,但提醒一下:无论你做什么,都不能阻止用户使用Angular多次投票。如果要完全阻止它,您必须向服务器添加额外的检查。您必须在后端执行此操作,可能是一个映射表映射用户提出问题。当用户在问题详细信息中向上投票时,您将在映射表中保存用户和问题id,并且您将有一个$scope变量,该变量将设置为true或false,并且在加载问题时,该变量将使用映射表检查记录是否存在于映射表中,并将变量设置为true或false i'm还没有到那个时候,我认为这样做是可能的,我浪费了很多时间。。我早该问的。谢谢你的帮助,我明天会试试。ng disabled
在span
上不起作用,它只在输入元素上起作用。。make it button会起作用的。谢谢,我已经更改了答案,你能帮我检查span上的属性是否正确吗。如果使用ng disabled
或.disabled=true
则没有任何区别。元素Id必须是唯一的。应该是之类的,答案会一步一步的好。谢谢你的建议。谢谢你的回答!我现在不能试一试,但似乎很好!我明天会测试。只有一件事我不确定,我必须把你的第一个区块码插入我的工厂吗?感谢回答,我明天会尝试