如何使用Angular js＆Node.js通过dynamic生成的字段将数据发布到mongodb

我正在开发产品上传页面。
几乎没有固定的字段，根据用户的select会产生很less的字段，然后整个数据会被发送到mongoDb。

模型

var productsSchema = new Schema({ merchantId: {type: String, required: true}, productName: {type: String, required: true}, productDescription: {type: String, required: true}, productStock: [ { price: {type: Number, required: true}, color: {type: String, required: true}, } ], offerFromMerchant: { offerStartDate: {type: Date, required: false}, offerEndDate: {type: Date, required: false}, discountPercent: {type: Number, required: false} } }); 

dynamic场发生器控制器方法 – angular度js

 $scope.choices = []; $scope.addNewChoice = function() { var newItemNo = $scope.choices.length+1; $scope.choices.push({}); }; $scope.removeChoice = function() { var lastItem = $scope.choices.length-1; if(lastItem > 0){ $scope.choices.splice(lastItem); } }; 

HTML

 <div class="col-12"> <form ng-submit="addProducts()"> <fieldset data-ng-repeat="choice in choices"> <div class="form-group"> <hr> <h3>Attributes</h3> <div class="form-group"> <label>Price</label> <input type="text" class="form-control" ng-model="product.productStock.price" placeholder="Enter price"> </div> <div class="form-group"> <label>Color</label> <input type="text" class="form-control" ng-model="product.productStock.color" placeholder="Enter color"> </div> </fieldset> <button type="submit" class="btn btn-primary">Add Product</button> </form> <button class="addfields" ng-click="addNewChoice()">Add fields</button> </div> </form><br/> 

POST方法 – Angular js

 $scope.addProducts = function () { $http.post('/products/createProduct', $scope.product).then(function (res) { console.log($scope.product); }); } 

我正在尝试POST数据具有多个属性，但在数据库中只有单个条目存在。

• 所以问题是，我不知道如何发送$ scope.choices $ scope.product，因为一些字段将被绑定到$ scope.product，属性字段将绑定到$ scope.choices.So我怎么能把这种数据发布到networking服务？

请帮忙..

Answer 1

你可以直接将颜色和尺寸的select绑定到$scope.product ，按照你想要的方式进行构造。 因此，通过$scope.product.productStock= [];初始化$scope.product productStock键$scope.product.productStock= []; 。 这样，你的对象将以所需的方式创build，因为双向数据绑定。

HTML ：

 <div class="col-12"> <form ng-submit="addProducts()"> <fieldset data-ng-repeat="val in product.productStock"> <div class="form-group"> <hr> <h3>Attributes</h3> <div class="form-group"> <label>Price</label> <input type="text" class="form-control" ng-model="val.price" placeholder="Enter price"> </div> <div class="form-group"> <label>Color</label> <input type="text" class="form-control" ng-model="val.color" placeholder="Enter color"> </div> </fieldset> <button type="submit" class="btn btn-primary">Add Product</button> </form> <button class="addfields" ng-click="addNewChoice()">Add fields</button> </div> </form><br/> 

JS ：

 $scope.product.productStock= []; $scope.addNewChoice = function() { var newItemNo = $scope.product.productStock.length+1; $scope.product.productStock.push({price:'',color:''}); }; $scope.removeChoice = function() { var lastItem = $scope.product.productStock.length-1; if(lastItem > 0){ $scope.product.productStock.splice(lastItem); } }; $scope.addProducts = function () { console.log($scope.product) $http.post('/products/createProduct', $scope.product).then(function (res) { }); } 

您可以按照以下方式初始化对象

  $scope.product={ productName:YourProductValue, productDescription:YourDescriptionValue, productStock:[] };