javascript - 如何切换 ng-click

Question

大家好，我正在尝试实现 Upvote 功能，但我在切换它时遇到了一些困难，通过切换我的意思是当用户单击按钮/链接时，如果用户再次单击它，它将执行 upvote 它将删除upvote，就像一个切换按钮，但我似乎无法从谷歌找到任何相关信息。这就是我目前所拥有的

已更新

 $scope.up = function(){
   if(s_session != null){ // check user is logged in or not 
    data.getUserData().success(function(userData){ // get user data
        $scope.a = data1.votes.up; // this is the data from database
                            // is a list of username that who voted this post
     $scope.b = userData.publicUsername.display;// this is the current username                                    
     if($scope.a.indexOf($scope.b) == -1){ //check this username whether is in 
                                           // the list if -1 mean not
       $scope.user ={};
       $scope.user = userData;
       $scope.user.permalink = $routeParams.permalink;
       $http.post('/contentHandler/post/vote/up',$scope.user). // perform upvote                                                   
                    success(function(updatedData) {
                        $scope.votedMsg="VOTED";
                        $scope.afterVoteUp={'color':'#B3B3B3'}
                    }).error(function(err){

                    });  
              }else{ //else remove upvote
                $scope.user ={};
                $scope.user = userData;
                $scope.user.permalink = $routeParams.permalink;
                $scope.votedMsg="";
                $scope.afterVoteUp={'color':'#2ecc71'}
                $http.post('/contentHandler/post/vote/up/remove',$scope.user).
                    success(function(Data) {

                    }).error(function(err){

                    });
              }

        });
        }else{
          $location.path('/login'); //redirect to login if not logged in 
        }
      }

但问题是我不能点击按钮两次，第一次点击会进行投票，但第二次点击仍然会进行投票，问题是因为用户名列表没有更新，但如果我刷新页面并再次单击它会删除赞成票。我可以有更好的方法吗？

Answer 1

一个简单的方法是在变量中维护状态，但请阅读下面的注意事项

$scope.upVoted = false
$scope.up = function() { //ng-click
    if ($scope.upVoted) {
        $http.post('/contentHandler/post/vote/up', $scope.user).
        success(function(updatedData) {
            $scope.votedMsg = "VOTED";
            $scope.afterVoteUp = {
                'color': '#B3B3B3'
            }
        }).error(function(err) {

        });
    }else{
        $http.post('/contentHandler/post/vote/up/remove', $scope.user).
        success(function(updatedData) {
            $scope.votedMsg = "VOTE REMOVED";
            $scope.afterVoteUp = {
                'color': '#FFFFFF'
            }
        }).error(function(err) {

        });
    }
});

您使用此和所有前端方法 的潜在问题是用户可以轻松更改 upVoted 的值，然后再次投票。

假设您正在 /contentHandler/post/vote/up 中进行一些验证，您可以更改它以切换服务器上的投票。这样，响应可能是来自服务器的更新后的 voted 状态。

如果您在前端管理状态，您如何知道用户刷新页面时是否已投票？