Angularjs 如何使用Angular js动态生成字段将数据发布到mongodb&；Node.js

我正在开发产品上传页面。
少数字段是固定的&少数字段将根据用户选择生成，然后整个数据将发布到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}
    }
});

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

$scope.addProducts = function () {

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

        });
    }

动态磁场发生器控制器方法

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

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

$scope.addProducts = function () {

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

        });
    }

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/>

我试图发布具有多个属性的数据，但在数据库中只有一个条目

• 所以问题是，我不知道如何将$scope.choices与$scope.product一起发送，因为一些字段将绑定到$scope.product，而属性字段将绑定到$scope.choices。那么我如何将此类数据发布到web服务

---

请提供帮助。

您可以直接将颜色和大小的选择绑定到

$scope.product

，方法是按您想要的方式对其进行结构化。因此，通过

$scope.product.productStock=[]将
$scope.product
的
productStock
键初始化到数组中。这样，由于双向数据绑定，对象将以所需的方式创建

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/>

$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:[]

  };

您可以按照您想要的方式将颜色和大小的选择直接绑定到
$scope.product
。因此，通过
$scope.product.productStock=[]将
$scope.product
的
productStock
键初始化到数组中。这样，由于双向数据绑定，对象将以所需的方式创建

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/>

$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:[]

  };

如何发布？这里没有显示POST请求的代码，也没有显示与数据库实际对话的express端的请求处理程序。@NeilLunn:我添加了POST方法。我使用web服务发布数据。似乎“web服务”就是问题所在。张贴代码。但是，您也可以查看这样一个事实：您正在修改
$scope.choices
，并且正在发送
$scope.product
。因此，这里要么缺少更多的代码，要么您只是修改了错误的内容。@NeilLunn:Web服务不是问题，因为我尝试发布具有多个属性的数据，并且发布成功。因此Web服务没有问题。是的，关于你的第二点，我也认为修改代码有问题。我已经发布了所有代码。所以问题是，我不知道如何使用$scope.product发送$scope.choices，因为一些字段将绑定到$scope.product，属性字段将绑定到$scope.choices。那么我如何将此类数据发布到web服务？那么您是说$scope.choices中的键和值与$scope.product中的键和值相同吗？在这种情况下，为什么不在我们的ng模型中为$scope.choice使用双向数据绑定？这里没有显示POST请求的代码，也没有显示与数据库实际对话的express端的请求处理程序。@NeilLunn:我添加了POST方法。我使用web服务发布数据。似乎“web服务”就是问题所在。张贴代码。但是，您也可以查看这样一个事实：您正在修改
$scope.choices
，并且正在发送
$scope.product
。因此，这里要么缺少更多的代码，要么您只是修改了错误的内容。@NeilLunn:Web服务不是问题，因为我尝试发布具有多个属性的数据，并且发布成功。因此Web服务没有问题。是的，关于你的第二点，我也认为修改代码有问题。我已经发布了所有代码。所以问题是，我不知道如何使用$scope.product发送$scope.choices，因为一些字段将绑定到$scope.product，属性字段将绑定到$scope.choices。那么我如何将此类数据发布到web服务？那么您是说$scope.choices中的键和值与$scope.product中的键和值相同吗？在这种情况下，为什么不在ur ng模型中对$scope.choice使用双向数据绑定来设置此错误：“TypeError:无法将未定义的属性'productStock'设置为new”现在我也无法多次添加颜色、大小。我以为你有一个名为$scope.product的对象，该对象具有名称和描述属性，如果没有初始化$scope.products={}；如何在同一架构上执行更新操作？我的意思是，如何再次生成随机数目的字段，并使用数据执行更新操作？Idk关于后端但在视图中，您将使用相同的变量在视图中预填充获取此错误：“TypeError:无法将未定义的属性'productStock'设置为new”现在我也无法多次添加颜色、大小。我以为您有一个名为$scope.product的对象，该对象具有名称和描述属性，如果没有初始化$scope.products={}；如何在同一架构上执行更新操作？我的意思是，如何再次生成随机数目的字段，并使用数据执行更新操作？Idk关于后端，但在视图中，您将使用相同的变量在视图中预填充