I have been developing a voting function for my Website, but am newer to using AngularJS's $resource and am looking to "update" an existing record with the vote I just recorded. The issue is that it is not updating and is not giving any error messages, merely stating in the console log that my REST call required CORS preflight, which leads me to believe it is at least hitting the backend.
At this point in development, I believe I may be off on how to update a record with an ID, as in this case, I don't have a $routeparam to pass in for reference but am trying to update from an ng-repeat that has the voting functionality as part of it. On screen it works by incrementing up or down, but does not update the database so that when I refresh the page, the changes don't hold because they were never committed.
Here is my HTML:
<div ng-controller="articleVotingCtrl">
<table class="table table-striped">
<tr>
<th>Votes</th>
<th>Title</th>
<th>Category ID</th>
</tr>
<tr ng-repeat="articlevote in articlevotes">
<td>
<div class="col-md-1 voting well">
<div class="votingButton" ng-click="upVote(articlevote);">
<i class="glyphicon glyphicon-chevron-up"></i>
</div>
<div class="badge badge-inverse">
<div>{{articlevote.articlevotes}}</div>
</div>
<div class="votingButton" ng-click="downVote(articlevote);">
<i class="glyphicon glyphicon-chevron-down"></i>
</div>
</div>
</td>
<td>{{articlevote.articletitle}}</td>
<td>{{articlevote.articlecategoryid}}</td>
</tr>
</table>
</div>
Here is my controller (which is where the issue probably is, or in combination with my service):
// Article Vote
pfcControllers.controller('articleVotingCtrl', ['$scope', 'pfcArticles', function($scope, pfcArticles) {
$scope.articlevotes = pfcArticles.query();
$scope.upVote = function(articlevote) {
articlevote.articlevotes++;
updateVote(articlevote.id, articlevote.articlevotes);
};
$scope.downVote = function(articlevote) {
articlevote.articlevotes--;
updateVote(articlevote.id, articlevote.articlevotes);
};
function updateVote(id, articlevotes) {
pfcArticles.update({
articleID: id
}), articlevotes;
}
}]);
Here is my service:
// All Articles
pfcServices.factory('pfcArticles', ['$resource', function($resource) {
return $resource('https://myrestcall.net/tables/articles', { articleID: '@id' }, {
'update': {
method: 'PATCH'
}
});
}]);
Here is sample JSON data:
[
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D4",
"articletitle": "artilce1",
"articlecategoryid": 1,
"articlesummary": "article 1 summary. ",
"articlevotes": 1
},
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D5",
"articletitle": "artilce2",
"articlecategoryid": 2,
"articlesummary": "article 2 summary. ",
"articlevotes": 3
},
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D6",
"articletitle": "artilce3",
"articlecategoryid": 3,
"articlesummary": "article 3 summary. ",
"articlevotes": 0
},
{
"id": "66D5069C-DC67-46FC-8A51-1F15A94216D7",
"articletitle": "artilce4",
"articlecategoryid": 1,
"articlesummary": "article 3 summary. ",
"articlevotes": 5
},
]