-2

User @guru's idea: each user can shift vote (up or down) rather than total clicks++/--.

how to create up/down voting function in angularjs

The problem I faced is this one-off vote feature once voted, other users can only change vote (but not add or deduct vote score, i.e -1<= vote score <=1)

My structure is:

  • each topic --> one user writes it but many users can vote
  • more importantly, up and down votes are separate scores and not netted off
  • each user can vote only once but can be changed anytime (i.e up->down, or down->up)

How do I implement so that its a one-off vote system + each user can add votes separately and total votes summed?

guru's version
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}}

Js

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



vote increment feature (old version that Im trying to change)

This version adds or remove 1 vote but a user can click multiple times. Other than using Firebase security features, I was trying to make it such that each user can only vote once. (But yet they can change their vote anytime)

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

app.controller('MainCtrl', function ($scope) {
    $scope.upVote = function () {
        $scope.vote++;
    }
    $scope.downVote = function () {
        $scope.vote--;
    }
    $scope.vote = 0;
});
Community
  • 1
  • 1
Thinkerer
  • 1,606
  • 6
  • 23
  • 43
  • Your question is rapidly being closed as "too broad". What might help against that is writing up a more realistic MCVE, as your current code snippets show little effort. – Frank van Puffelen Nov 03 '14 at 19:46
  • @FrankvanPuffelen attached the code. originally i wanted to take more time to think about how to rearrange the broken code (which im too embarassed to not have produced anything concrete as yet) but guess the more the merrier! Thanks for your reply and advice :) – Thinkerer Nov 04 '14 at 00:53
  • I have edited the question, let me know if this one is more focused. Thanks everyone for your help. – Thinkerer Dec 01 '14 at 04:11

1 Answers1

1

You would need to store the result of the users vote for that item, so item.vote = "down" or item.vote = "up". You could then do a check against both if they have voted for it, and what the vote was.

I'm not sure how Firebase stores their info, but in a typical relational db you'd have 3 tables, items, users, and uservotes, with items being a list of the items, users being your users and uservotes (or whatever name) being a table that combines itemId, userId and the votetype (up / down).

// Really you'd need a way to do this more securely with your backend code and not on the front end or people can cheat it easily...
$scope.upVote = function () {
    if ($scope.voteType == "down") {
        $scope.vote++;
    }
    $scope.vote++;
    $scope.voteType = "up";
}
$scope.downVote = function () {
    if ($scope.voteType == "up") {
        $scope.vote--;
    }
    $scope.vote--;
    $scope.voteType = "down";
}
$scope.vote = 0;
John
  • 6,503
  • 3
  • 37
  • 58