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 
        }
      }

但问题是我无法点击按钮两次，第一次点击将执行upvote但第二次点击仍将执行upvote，问题是因为用户名列表没有更新，但如果我刷新页面和再次点击它将删除upvote。我可以有更好的方法吗？

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状态。

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

Answer 2

我不知道AngularJS，但基本的编程知识和假设.up是点击处理程序告诉我你需要：

$scope.up = function() {
    if( {ALREADY_UP_VOTED} ) {
       //perform remove upvote
    } else {
       //perform upvote 
    }
}

编辑：（记住dfsq的评论）

我猜你可以查看你的$scope.votedMsg变量：

$scope.up = function() {
    if( $scope.votedMsg == "VOTED" ) {
       // perform remove upvote

       // remove upvote thing..
       $scope.votedMsg = "";
    } else {
       //perform upvote 
    }
}

Answer 3

干净的方法是：

<div ng-click="isUpVoted = !isUpVoted">{{isUpVoted}}</div>

JS：

$scope.isUpVoted = false;

$scope.$watch("isUpVoted",function(newVal, oldVal){
    if(newVal != oldVal){
        if(newVal){
            // perform upvote
        }
        else{
            // perform remove upvote
        }
    }
});

的 Fiddle

如何切换ng-click

3 个答案: