如何切換ng點擊

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。我可否有更好的方法來做到這一點？

Answer 1

乾淨的方法是：

個

<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

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

一個簡單的方法是保持狀態的變量，但請閱讀下面的注意事項

$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狀態。

如果您管理前端的狀態，如何知道用戶在刷新頁面時是否投票？