Question

我的API填充了一些嵌套模型。使用购物示例，当您查询orders时，items属性将填充description和quantity，而不是仅返回商品ID。

orders: [
    {_id: 1,
     items: [
         {_id: 100,
          description: "apple", // from lookup in the Items table
          quantity: 4 // from lookup in the Items table
         }, ...
     ],
     ...
    }, ...
]

我的观点如下：

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

目标是让用户从此视图更新商品描述和数量。（li是可信的指令。）update来电应在Item $resource，而不是Order $resource。< / p>

有没有办法让Angular认识到嵌入的文档是Item，我可以调用$update之类的方法？

我的解决方法是更改ng-blur以调用与此等效的控制器方法：

ng-blur="Item.update({_id: item._id})"

（如果我这样做，使用$parent.$index和$index语法也毫无意义 - 只需order.item和item.description。）

Answer 1

您要做的是将嵌套资源转换为实际资源。为此，请将响应转换器添加到Order资源。例如

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

另一种方法是只处理控制器中的item更新。例如

ng-blur="updateItem(item)"

与

$scope.updateItem = function(item) {
    Item.update(item);
};

ngRepeats中的嵌套/嵌入式$资源

1 个答案: