how to create up/down voting function in angularjs

All we need is an easy explanation of the problem, so here it is.

Hey guys may i know how can i create a up/down voting function in angularjs ? i want to make it to something similar to stackoverflow or reddit.
i found a Jquery plugin https://github.com/janosgyerik/jquery-upvote that does what i want but its in Jquery.

i have tried several approach to do it but i still can’t get it works well. here’s my approach.

HTML

<a class="green" ng-click="isUpVoted = !isUpVoted"  ng-style="afterVoteUp" href=""> <i title=" rel="nofollow noreferrer noopener"Up Votes" class="fa fa-arrow-circle-up fa-2x"></i></a>

<a class="maroon" ng-click="isDownVoted = !isDownVoted" ng-style="afterVoteDown" href="" > <i title=" rel="nofollow noreferrer noopener"Down Votes" class="fa fa-arrow-circle-down fa-2x "></i></a>

Controller

$scope.isUpVoted = false;
    $scope.$watch("isUpVoted",function(newVal, oldVal){
    if(newVal != oldVal){
        if(newVal){
           // first click
           // upvote

        }else{
           // second click 
           // remove upvote
        }

        }
});

$scope.isDownVoted = false;
        $scope.$watch("isDownVoted",function(newVal, oldVal){
        if(newVal != oldVal){
            if(newVal){
               // first click
               // downvote

            }else{
               // second click 
               // remove downvote
            }

            }
    });

which work completely fine for one button, however i still can’t figure out how to make this 2 buttons work together, for example when user click upvote downvote will cancel or vice versa and click the upvote again to cancel vote.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Just use a single scope variable to act like a toggle button.

Sample Demo: http://plnkr.co/edit/C4w9hDK3xW1R0ua3WPgU?p=preview

HTML:

<body ng-controller="MainCtrl">
  <i title="Up Votes" ng-click="changeVote(vote, 'up')" class="fa fa-arrow-circle-up fa-2x" ng-class="{true:'up', false:''}[vote=='up']"></i>
  <br>
  <i title="Down Votes" ng-click="changeVote(vote, 'down')" class="fa fa-arrow-circle-down fa-2x"  ng-class="{true:'down', false:''}[vote=='down']"></i>
  <br>Vote: {{vote}}

Controller Logic:

app.controller('MainCtrl', function($scope) {
  $scope.changeVote = function(vote, flag) {
    $scope.vote = vote == flag ? 'None' : flag;
    alert($scope.vote);
  };
});

Method 2

It should be simple to make something like this.
Here’s a simple example:

JS:

var app = angular.module('voteApp', []);

app.controller('MainCtrl', function ($scope) {
    $scope.upVote = function () {
        $scope.vote++;
    }

    $scope.downVote = function () {
        $scope.vote--;
    }

    $scope.vote = 0;
});

Fiddle.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply