AngularJS - Modifying a $Resource parameter at DLL change - angularjs

Question

I inherited an Angular application that calls a Web API service. I am trying to keep the existing structure as close to the original as possible. A new requirement is to pass in a number of days, and I have modified the call:
(function () {
'use strict';
angular
.module('myApp')
.factory('summaryService', ['$resource', summaryService]);
function summaryService($resource) {
return $resource('/api/summary/?days=:days', { days: '#days' }, {
getUserSummary: { method: 'POST' }
});
}
}());
The code that calls the getUserSummary service is below. I have a drop down list that is populated with days at load time. The updateByDays function is what is called when the days DDL is changed. This fires correctly, and the "daysToReport" parameter is being updated to the correct value.
summaryService.getUserSummary({ Name: currentUser, days: 21 },
function (value) {
$scope.daysList = [{
name: '30 Days',
value: '30'
}, {
name: '60 Days',
value: '60'
}];
$scope.updateByDays = function (daysToReport) {
$scope.days = days;
...
};
},
function (httpResponse) {
...
}
);
As it is now, the call to the Web API method is successfully made, but it always has a "days" parameter value of 21", which is expected - it's the hard-coded value in the parameter list. Somehow, when the updateByDays method fires, I need to update the "days" parameter so the call to the Web API is made correctly. How can this be accomplished?
Thank you,
Scott

Answer 1

Pay attention on what are you trying to call resource with. Look at this docs: AngularJS $resource.
So, you call POST resource. You have to call resource functions with this params:
summaryService.getUserSummary(
{getParams},
{postParams},
function successCallback(){},
function errorCallback() {}
);
So, your call will be:
summaryService.getUserSummary(
{days: selectedDaysValue},
{},
function onSuccess() {}
);
Note to selectedDaysValue. It is model from ngModel directive of your select in html. It must be dynamic. You send 21 days all time because you call resource with static object { Name: currentUser, days: 21 }. Also, notice that Name will be added to query like &Name=currentUserValue.
Also, you want to use query in your request. You don't need to specify query in your resource parameters.
Resource definition will be:
return $resource('/api/summary');
Resource call:
myResource.get({days: 21}, function onSuccess() {});
Actual request will be: /api/summary?days=21

Answer 2

I probably didn't explain all the various pieces of the puzzle, but I tried the solution, and for my situation, it wasn't working. So I ended up cheating and using plain JavaScript.
In the method, I found the Days DDL and set the selected option to the matching text value:
$scope.updateByDays = function (days) {
var desiredValue = days.name;
var el = document.getElementById("Days");
for (var i = 0; i < el.options.length; i++) {
if (el.options[i].text == desiredValue) {
el.selectedIndex = i;
break;
}
}
There goes my "Coder of the Year" award.