Question

我有一个小问题，请一些建议或帮助我如何解决这个恼人的问题。问题：如何从阵列中的多个输入中保存值？在数据库中的当前代码只保存第一个输入，如果我在其他人的第一个输入中写一些内容正在编写相同的内容（我认为问题出在ng-model中）。

的index.html

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

api.js

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

服务

{{1}}

}

Answer 1

每个输入的Ng模型值应该不同，因为有角度使用双向数据绑定，因此它将所有输入绑定相同 NG-模型

您可以点击保存，将所有输入值绑定到数组，如下所示。以您期望的数组所需的方式更改代码，也许如果您想在控制器中使用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=[];

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

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

2 个答案: