GETting, and then POSTing, based on user selection

Question

I am making a small polls app using yeoman's angular-fullstack generator. I have setup some dummy data for polls. When the user clicks a poll, they get routed to a view page where they can input their choice based on the answers set for the question.

Currently, when the user chooses an option and presses submit, the change updates on the client-side, but I am having trouble knowing what to put for the database POST request.

Here is the view view:

<div class="container">
        <h3>{{poll.title}}</h3>
        <form ng-submit="submitForm()">

            <div ng-repeat="answer in poll.answers">
                <label><input type="radio" name="option" ng-model="radioData.index" value="{{$index}}"/>
                    {{ answer.value }} - {{ answer.votes }} Votes
                </label>
            </div>
            <button class="btn btn-success" type="submit">Vote!</button>
        </form>
</div>

And here is its controller:

'use strict';

angular.module('angFullstackCssApp')
    .controller('ViewCtrl', function ($scope, $routeParams, $http) {
        $http.get('/api/polls/' + $routeParams._id).success(function (poll) {
            console.log(poll);
            $scope.poll = poll;
            $scope.radioData = {
                index: 0
            };
            $scope.viewPoll = true;

            $scope.alreadyVoted = false;

            $scope.submitForm = function () {
                $scope.alreadyVoted = true;
                console.log($scope.radioData.index);
                $scope.poll.answers[$scope.radioData.index].votes += 1;
                // Change database entry here
            };
        });
    });

Here is my poll schema:

var PollSchema = new Schema({
    creator: String,
    title: String,
    answers: [{
        value: String,
        votes: Number
    }]
});

So my questions are:-

How do I write a suitable POST request to increment the vote for the answer by one?
Is it correct to be writing my code within this GET request as I am doing? It feels like there must be a more appropriate way to do it, especially due to the fact I am calling another request within it.

score 0 · Answer 1 · answered Oct 16 '15 at 21:03

You only need to assign your poll to $scope.poll in your success callback. The other variables can be set outside that callback.

For me it would make sense to assign an id to your answers, then you can tell your api what answer ID should get an extra vote, and pass that along.

    $scope.submitForm = function() {
         $http.post('/api/addVote/', 
             { answerId: $scope.votedAnswerId }
         ).success(function () {
             alert("success");
         }).catch(function () {
             alert("some error occurred");
         });
    };

Your input becomes: <input type="radio" name="option" ng-model="$parent.votedAnswerId" value="{{ answer.id }}"/>

(Why the $parent? Because ng-repeat creates it's own scope inside your controllers scope.)

GETting, and then POSTing, based on user selection

1 Answers1