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（）方法列表对象及其嵌套对象

回答

相关问题