CODEWITHSUNDEEP
angularjsnode.jsexpressmongoose
Mat.Now
Mat.Now

Reputation: 1725

Post array to database from inputs

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)

}

Upvotes: 3

Views: 1609

Answers (2)

Vivz
Vivz

Reputation: 6630

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=[];

Upvotes: 2

Gaurav Srivastava
Gaurav Srivastava

Reputation: 3232

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>

Upvotes: 2

Related Questions