AngularJS：push（）方法List对象及其嵌套对象

Question

我尝试使用push方法来保存对象及其嵌套对象，但我对列表有点问题。

在这种形式下，我有＆＃39;产品＆＃39;和＆＃39;类别＆＃39;但是当我填写表格然后按＆＃39;保存＆＃39;为了保存产品6＆＃39;反对＆＃39;类别名称＆＃39;没有出现在列表中，我需要重新加载页面。

如您所见，类别名称为空。

如何使用push方法列出对象及其嵌套对象？

表格注册

<form name="newProductForm">
    <div class="form-group">
        <label for="name">Name</label> 
        <input type="text" data-ng-model="product.name" class="form-control" id="name" placeholder="Name" />
    </div>
    <div class="form-group">
        <label for="quantity">Quantity</label> 
        <input type="number" data-ng-model="product.quantity" class="form-control" id="quantity" placeholder="Quantity" />
    </div>
    <div class="form-group">
        <label data-for="category">Category:</label>
        <select data-ng-model="product.category.id" class="form form-control">
            <option value="">--Select category--</option>
            <option data-ng-repeat="category in categories" value="{{category.id}}">{{category.name}}</option>
        </select>
    </div>

    <button type="submit" class="btn btn-primary" data-ng-click="addProduct(product)">Save</button>
</form>

产品列表

<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Category</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="product in products">
            <td>{{$index+1}}</td>
            <td>{{product.name}}</td>
            <td>{{product.category.name}}</td>
            <td>{{product.quantity}}</td>
        </tr>   
    </tbody>    
</table>

服务和控制器

.controller("productsController", function($scope, $http, addProductService, listProductsService, listCategoriesService){

    $scope.addProduct = function(product){
        var newProduct = addProductService.createProduct($scope.product);
        $scope.products.push(newProduct);
    };

    $scope.products = listProductsService.query();
    $scope.categories = listCategoriesService.query();

})

.factory("addProductService", function($resource){
    return $resource("product", {}, {
        createProduct: {
            method: "POST"
        }
    })
})

.factory("listProductsService", function($resource){
        return $resource("product", {}, {
            listProducts: {
                method: "GET"
            }
        })
})

Answer 1

这是来自$ {资源的angular documentation：

  

重要的是要意识到调用$ resource对象方法   立即返回一个空引用（对象或数组取决于   IsArray的）。一旦数据从服务器返回现有数据   引用填充了实际数据。

我相信你的代码应该类似于：

$scope.addProduct = function(product){
    addProductService.createProduct($scope.product, function(newProduct){
        $scope.products.push(newProduct);
    });
};

这应该等待资源方法返回，然后将返回的数据推送到数组而不是空引用。