mardi 5 mai 2015

Nested/embedded $resources in ngRepeats

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 bona fide Items?

The workaround that I have is to change the ng-blur:

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.)

Aucun commentaire:

Enregistrer un commentaire