Put array into database from inputs
I have a litte problem and please some advice or help how I can solve this annoying problem. Question: How to store values from multiple inputs in an array? In existing code, only the first entry is saved in the database, and if I write something in the first entry in the others, then I write the same thing (think the problem is in the 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!'});
}
})
});
services
userFactory.createNewCourse = function(productData){
return $http.post('/api/courses', productData)
}
source to share
The ng-model value should be different for each input as angular uses two-way data binding, so it will bind all inputs to the same ng-model.
You can bind all your input values to an array by clicking the save button as shown below. Modify your code as your API expects an array, and maybe if you want to use a userFactory in a controller, inject it and call the API with a 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 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, initialize the descriptionArray
$scope.descriptionArray=[];
source to share
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>
source to share