Nested/embedded $resources in ngRepeats - angularjs

Question

My API populates some nested models. Using a shopping example, when you query orders, the items property is populated with the description and quantity instead of returning just the item IDs.
orders: [
{_id: 1,
items: [
{_id: 100,
description: "apple", // from lookup in the Items table
quantity: 4 // from lookup in the Items table
}, ...
],
...
}, ...
]
My view looks like:
<div ng-repeat="order in vm.orders">
<ul ng-repeat="item in order.items">
<li ng-model="vm.orders[$parent.$index].items[$index].description" ng-blur="item.$update()"></li>
<li ng-model="vm.orders[$parent.$index].items[$index].quantity" ng-blur="item.$update()"></li>
</ul>
</div>
The goal is to let the user update the item description and quantity from this view. (The lis are contenteditable directives.) The update call should be made on the Item $resource, not the Order $resource.
Is there a way to get Angular to recognize that the embedded documents are Items, upon which I can call methods like $update?
The workaround that I have is to change the ng-blur to call a controller method equivalent to this:
ng-blur="Item.update({_id: item._id})"
(If I do that, there's also no point in using the $parent.$index and $index syntax -- just order.item and item.description.)

Answer 1

What you want to do is transform the nested resources into actual resources. To do so, add a response transformer to your Order resource. For example
.factory('Order', function($resource, $http, Item) {
var responseTransformer = function(order) {
order.items = order.items.map(function(item) {
return new Item(item);
});
return order;
};
// somewhat lifted from https://docs.angularjs.org/api/ng/service/$http#overriding-the-default-transformations-per-request
var appendResponseTransformer = function(transformer) {
var defaults = $http.defaults.transformResponse;
defaults = angular.isArray(defaults) ? defaults : [defaults];
return defaults.concat(transform);
};
return $resource('/orders', whatever, {
get: {
method: 'GET',
url: '/orders/:id',
params: { id: '#id' },
transformResponse: appendResponseTransform(responseTransformer)
},
query: {
method: 'GET',
isArray: true,
transformResponse: appendResponseTransform(function(orders) {
return orders.map(responseTransformer);
})
}
});
});
An alternative to this would have been to just handle the item update in your controller. For example
ng-blur="updateItem(item)"
with
$scope.updateItem = function(item) {
Item.update(item);
};