AngularJS：push（）方法列表對象及其嵌套對象

我試圖使用push方法來保存一個對象及其嵌套對象，但我有一個與列表有點問題。AngularJS：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" 
      } 
     }) 
})

來源

2016-12-27 wilson

'addProductService.createProduct（）'做了什麼？它是立即返回一個值還是返回承諾的結果？如果你在調用'createProduct（）'的行的下面放置一個'console.log（newProduct）'，你會在控制檯中得到'undefined'嗎？ – Lex

@威爾遜，請顯示產品列表表格的html。 –

@big_water當然，問題已經更新 – wilson

這是從angular documentation上$資源：

重要的是要認識到，調用$資源對象方法立即返回一個空引用（取決於 IsArray的物體或陣列）是重要的。一旦數據從服務器返回，現有的引用就會填充實際數據。

我相信你的代碼應類似於：

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

這應該等待資源方法返回然後按返回的數據在陣列上，而不是一個空的參考。

來源

2016-12-27 19:32:47

好吧，但正如我之前所說，保存對象後無法列出分類名稱。 – wilson

@wilson，當您查看從服務器返回的數據時，是否有填充數據的「product.category」對象？ –

AngularJS：push（）方法列表對象及其嵌套對象

回答

相關問題