how to create up/down voting function in angularjs

Question

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="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="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.

guru · Accepted Answer · 2014-06-07T06:38:14.870

4

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

edited Jun 07 '14 at 06:38

answered Jun 07 '14 at 05:23

guru

4,002
1
28
33

hi thanks for your answer may i know how can i determine which button the user click in the controller ? like the controller on my question. so that i can write my http request on the click action. – John Lim Jun 07 '14 at 05:33
I have updated the plunker for you. You can use a invoke a scope function and use the $scope.vote to check which one was clicked – guru Jun 07 '14 at 06:36

score 1 · Answer 2 · answered Jun 07 '14 at 05:36

1

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.

answered Jun 07 '14 at 05:36

Amir Popovich

29,350
9
53
99

I know it's old but I can't find clearly answer. Do you know how limit votes only to one up or one down? – Mat.Now Feb 22 '17 at 13:15
Simply add an if condition before you increment. `if($scope.vote < 1){ $scope.vote++; }` – Amir Popovich Feb 22 '17 at 16:09
I know this solution, but I need universal, because if you add $scope.vote=10, this solution not works – Mat.Now Feb 22 '17 at 16:21
I don't really understand you. You can limit the vote to be between -1 and 1 or -10 and 10. All you need is to add a maxvalue interval constant and change the condition. – Amir Popovich Feb 22 '17 at 16:39

how to create up/down voting function in angularjs

2 Answers2

Linked