AngularJS: метод push() Объект списка и его вложенный объект

Question

Я попытался использовать метод push для сохранения объекта и его вложенного объекта, но у меня есть небольшая проблема с этим списком.

В этой форме у меня есть «Продукты» и «Категория», но когда я заполняю форму, а затем нажмите «Сохранить», чтобы сохранить объект «Продукт 6», имя «Категория» не отображается в списке и мне нужно перезагрузить страницу.

Как вы можете видеть, название категории пуст.

Как я могу перечислить объект и его вложенный объект, используя метод нажимной?

регистрация Форма список

<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 на $ ресурсе:

Важно понимать, что вызов метода объекта $ ресурса немедленно возвращает пустую ссылку (объект или массив в зависимости от IsArray). Как только данные возвращаются с сервера, существующая ссылка заполняется фактическими данными.

Я считаю, что ваш код должен быть похож на:

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

Это должно ждать метод ресурса, чтобы вернуться затем нажмите возвращаемые данные на массив вместо пустой ссылки.