how to toggle ng-click

Question

hello guys i'm trying to implement Upvote feature but i'm having some difficulties to get it toggle, by toggle i mean when user click the button/link it will perform upvote if the user click it again it will remove the upvote, just like a toggle button but i can't seem to find any relevant info from google. this is what i have so far

UPDATED

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

but problem is i can't click the button twice, the first click will perform upvote but the second click still will perform upvote, the problem is because the list of username is not being updated, but if i refresh the page and click it again it will remove the upvote. may i is there any better way to do this ?

Use a flag variable. like $scope.clicked = !$scope.clicked; if($scope.clicked){//dosomething} — Satpal
– Satpal, Commented Mar 5, 2014 at 12:34

spikeheap · Accepted Answer · 2014-03-05 12:46:28Z

2

A simple approach would be to maintain the state in a variable, but please read below for caveats

$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) {

        });
    }
});

The potential issue you have with this and all frontend approaches is that the user can trivially change the value of upVoted, and vote again.

Assuming you're doing some validation in /contentHandler/post/vote/up you could alter it to toggle the vote on the server. That way the response could be the updated voted status from the server.

If you manage the state on the frontend, how will you know if the user has voted when they refresh the page?

answered Mar 5, 2014 at 12:46

spikeheap

3,8871 gold badge34 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Lim Over a year ago

i have updated my question, sorry for my poor explanation and didn't state my question clearly

AlwaysALearner · Accepted Answer · 2014-03-05 13:26:01Z

1

A clean approach would be:

<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

edited Mar 5, 2014 at 13:26

answered Mar 5, 2014 at 12:40

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

3 Comments

spikeheap Over a year ago

The ng-click="a =!a and watch is by far the cleanest way to achieve toggling. Nice answer :). I'm not a fan of adding the toggling logic to my HTML, so often add a toggleUpVote function to the $scope which does the same thing.

John Lim Over a year ago

i have updated my question, sorry for my poor explanation and didn't state my question clearly

AlwaysALearner Over a year ago

@JohnLim my answer still holds true.

user3723637 · Accepted Answer · 2014-06-09 20:02:17Z

1

I don't know AngularJS, but basic programming knowledge and assuming .up is the click handler tells me you need:

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

EDIT: (with dfsq's comment in mind)

I guess you could look at your $scope.votedMsg variable:

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

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

edited Jun 9, 2014 at 20:02

user3723637

1308 bronze badges

answered Mar 5, 2014 at 12:36

Michael Coxon

5,5401 gold badge29 silver badges54 bronze badges

1 Comment

John Lim Over a year ago

i have updated my question, sorry for my poor explanation and didn't state my question clearly

Collectives™ on Stack Overflow

how to toggle ng-click

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related