Post array to database from inputs

Question

I have a litte problem and please some advices or help how I can solve this annoying problem. Question: How save values from multiple inputs in on array? In present code in database save only first input, and if I write something in first input in others is writing the same (I think the problem is in 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!'});
        }
    })
});

service

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

}

Please provide your controller code as well.

Surjeet Bhadauriya
– Surjeet Bhadauriya

2017-07-27 07:44:50 +00:00
Commented Jul 27, 2017 at 7:44 — Surjeet Bhadauriya
– Surjeet Bhadauriya, Commented Jul 27, 2017 at 7:44
See your all input tag have model with same name.

Surjeet Bhadauriya
– Surjeet Bhadauriya

2017-07-27 07:45:12 +00:00
Commented Jul 27, 2017 at 7:45 — Surjeet Bhadauriya
– Surjeet Bhadauriya, Commented Jul 27, 2017 at 7:45

Gaurav Srivastava · Accepted Answer · 2017-07-27 07:57:08Z

2

you can use ng-repeat to do what you need:

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>

answered Jul 27, 2017 at 7:57

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaurav Srivastava Over a year ago

@V.R glad i could help :-)

Vivz · Accepted Answer · 2017-07-27 08:00:10Z

2

Ng-model value should be different for each input, because angular uses two way data binding so it will bind all the input with same ng-model.

You can bind all your input values to an array on click of save like below. Change your code in the desired way your API is expecting the array and maybe if you want to use the userFactory in controller, inject it and call API with the factory using the array you created in the save function.

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>

Controller

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

Using ng-repeat to generate the inputs

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

In your controller initialise your descriptionArray

$scope.descriptionArray=[];

edited Jul 27, 2017 at 8:00

answered Jul 27, 2017 at 7:47

Vivz

6,6282 gold badges19 silver badges34 bronze badges

2 Comments

Mat.Now Over a year ago

ok thank, is good start, but the point is I would like have variable in description i.e. "description[i]" : $scope.description[i] because I don't how many inputs can be use

Vivz Over a year ago

@V.R Just initialize $scope.descriptionArray with the values you want and use the appropriate binding for ng-model.If your array is an array of values above method will be fine, if it is an array of object then bind ng-model to a property of the object, for example description.name

Collectives™ on Stack Overflow

Post array to database from inputs

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related