Allow dynamic parameter name for Angular ngResource call - angularjs

Question

I'm trying to use a custom Angular directive with a custom attribute, i.e. :filterBy=:filter. This is being done with a custom directive like this:
<foo filterBy=location filter=ABC></foo>
The service:
function Foo($resource) {
return $resource(base + 'Foo');
}
The ngResource call:
var filterBy = attrs.filterBy;
var getSegments = Foo.get({filterBy: attrs.filter, limit: attrs.limit, offset: attrs.offset});
returns this:
http://localhost:8000/base/Foo?filterBy=ABC&limit=30 (notice it says "filterBy" instead of location")
It should be returning this resource instead:
http://localhost:8000/base/Foo?locations=Bar&limit=30
It seems the filterBy is being turned into a string in the ngResource call. I wan't it to use the value of the attrs.filterBy, but it doesn't like dot notation in the parameter value.
I've also tried this:
var getFilter = function() {
return attrs.filterBy;
};
But when I do that, the resource URL turns into:
http://localhost:8000/base/Foo?getFilter=Bar&limit=30
Note the "getFilter" is the parameter now. So is there any way to create a custom parameter?

Answer 1

var filterBy = attrs.filterBy;
var params = {limit: attrs.limit, offset: attrs.offset};
params[filterBy] = attrs.filter;
var getSegments = Foo.get(params);
When you write filterBy: value then filterBy is an identifier. It's static. It has no relation whatsoever to any variable.
params[filterBy] = attrs.filter; on the other hand dynamically adds a property and the value within the brackets is an expression that can be resolved to a string. So it can be a variable.