从输入将数组发布到数据库答案

【问题标题】：Post array to database from inputs从输入将数组发布到数据库
【发布时间】：2018-01-02 18:55:59
【问题描述】：

我有一个小问题，请提供一些建议或帮助我如何解决这个烦人的问题。问题：如何将来自多个输入的值保存在数组中？目前数据库中的代码只保存第一个输入，如果我在第一个输入中写了一些东西，其他人的写法也是一样的（我认为问题出在 ng-model 中）。

index.html

<div class="form-group">
  <form>
    <input type="text" ng-model="description" name="description" class="form-control" required>
    <input type="text" ng-model="description" name="description" class="form-control" required>
    <input type="text" ng-model="description" name="description" class="form-control" required>
    <button type="submit">Save</button>
  </form>
</div>

api.js

    router.post('/courses', function(req, res){
var course = new Product();
course.description  = req.body.description;
    course.save(function(err){
        if(err){
          console.log(err)
        } else {
            res.json({success:true, message:'saved!'});
        }
    })
});

服务

    userFactory.createNewCourse = function(productData){
return $http.post('/api/courses', productData)

}

【问题讨论】：

请同时提供您的控制器代码。
查看你所有的输入标签都有同名的模型。

标签： angularjs node.js express mongoose

【解决方案1】：

每个输入的 Ng-model 值应该不同，因为 angular 使用两种方式数据绑定，因此它将所有输入绑定到相同的 ng 模型。

您可以在单击保存时将所有输入值绑定到一个数组，如下所示。以您的 API 期望数组的所需方式更改您的代码，也许如果您想在控制器中使用 userFactory，请将其注入并使用您在保存函数中创建的数组调用工厂 API。

HTML

<div class="form-group">
  <form ng-submit="save()">
    <input type="text" ng-model="description1" name="description1" class="form-control" required>
    <input type="text" ng-model="description2" name="description2" class="form-control" required>
    <input type="text" ng-model="description3" name="description3" class="form-control" required>
    <button type="submit">Save</button>
  </form>
</div>

控制器

    var myApp = angular.module('myApp', []);
 myApp.controller('myCtrl', ['$scope', '$http'function($scope, $http) {
         $scope.productData = [];
         $scope.save = function() {
             $scope.productData.push({
                 "description1": $scope.description1,
                 "description2": $scope.description2,
                 "description3": $scope.description3
             });
             $http.post('/api/courses', productData).then(function(response) {
             });
         }]);
 }

使用 ng-repeat 生成输入

<div class="form-group">
      <form ng-submit="save()">
      <div ng-repeat="description in descriptionArray>
        <input type="text" ng-model="description[$index]" name="description_{{$index}} " class="form-control" required">
 </div>
      </form>
    </div>

在你的控制器中初始化你的 descriptionArray

$scope.descriptionArray=[];

【讨论】：

好的，谢谢，是一个好的开始，但关键是我希望在描述中有变量，即“description[i]”：$scope.description[i]，因为我没有多少输入可以被使用
@VR 只需使用您想要的值初始化 $scope.descriptionArray 并为 ng-model 使用适当的绑定。如果您的数组是一个值数组，上面的方法就可以了，如果它是一个数组对象然后将 ng-model 绑定到对象的属性，例如 description.name

【解决方案2】：

你可以使用 ng-repeat 来做你需要的事情：

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope,$http) {

$scope.description = [];
  $scope.save = function() {
    $http.post('/api/courses', $scope.description).then(function(response) {});   
  }
});

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="myCtrl">

    <form ng-submit="save()">
      <div ng-repeat="n in [].constructor(3)  track by $index">
        <input type="text" ng-model="description[$index]" name="description_{{$index}}" class="form-control" required />
      </div>
      <button type="submit">Save</button>
    </form>
    <h1>Input Data:</h1>
    {{description}}
</body>

</html>

【讨论】：

@V.R 很高兴我能帮上忙 :-)