AngularJS：push（）メソッドListオブジェクトとそのネストされたオブジェクト

Question

オブジェクトとそのネストされたオブジェクトを保存するためにpushメソッドを使用しようとしましたが、リストに少し問題があります。

私は 'Products'と 'Category'を持っていますが、フォームに入力して 'Save'を押して 'Product 6'オブジェクトを保存すると、 'Category name'はリストに表示されません私はページをリロードする必要があります。

ご覧のとおり、カテゴリ名は空です。私はプッシュ方式を使用して、オブジェクトとそのネストされたオブジェクトを一覧表示することができますどのように

？

フォーム登録

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

。