I've built a shopping cart for a training site. People can purchase a number of 'seats' for each training session. What I need to add is a form requiring the name and email for each seat(attendee). So if someone purchases 3 seats, then I will need to generate form fields for each attendee.
I'm assuming there's something in the following code that plays a part in solving this problem but I'm not skilled enough in Angular to work it out.
ng-repeat="i in quantity track by $index"
look at this codepen it works fine :)
var app = angular.module('myapp',[]);
app.controller('ctrlParent',function($scope){
$scope.myNumber=1;
$scope.range = function(count){
var output = [];
for (var i = 0; i < count; i++) {
output.push(i)
};
return output;
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="ctrlParent">
<input ng-model="myNumber" type="text" placeholder="Quantity"/>
<form ng-repeat="i in range(myNumber) track by $index">
<input type="text" placeholder="Name"/>
<input type="text" placeholder="Name"/>
<input type="text" placeholder="Name"/>
<input type="button" value="Ok"/>
</form>
</div>
</div>
First, get the number of seats, in the form (send the seats number by events OR shared service if the form are in another angular controller) So, let say $scope.nbrSeats (initial value = 0) in forms controller.
Second, using ng-repeat :
<form ng-repeat="i in nbrSeats">...</form>
Here is a working example for you:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.quantity = '1';
$scope.availableQuantity = '10';
$scope.range = function(num) {
num = parseInt(num);
return new Array(num);
}
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<form name="myForm">
<select ng-model="quantity">
<option ng-repeat="option in range(availableQuantity) track by $index">{{$index + 1}}</option>
</select><br/><br/>
<div ng-repeat="customer in range(quantity) track by $index">
Customer {{$index + 1}} name: <input type="text" ng-model="customer_$index"><br/>
</div><br/><br/>
<button type="submit">Purchase</button>
</form>
</div>
quantityso that we can be eventually able to help..$scope.quantity- an array ? or a number ??