Angularjs repeat form fields

Question

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"

You should at least provide a part of the HTML you have as well as the contents of `quantity` so that we can be eventually able to help.. — jsfrocha, Sep 11 '15 at 13:15
do something like [this](http://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-instead-of-repeating-over-array) but instead of an index counter put your form — Joe Lloyd, Sep 11 '15 at 13:25
the scope quantity the number of seats. Not an array, just a number. — steverh, Sep 11 '15 at 15:08
@steverh I edited my answer, you can check it again. And mark it as solved if it solves your issue. thanks :) — ben, Sep 11 '15 at 22:34

ben · Answer 1 · 2015-09-11T22:33:43.580

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>

Thanks for your help but your's doesn't work in Codepen. No matter what argument I pass to the function, I only get 1 set of form fields. — steverh, Sep 12 '15 at 14:57

score 1 · Answer 2 · answered Sep 11 '15 at 13:27

1

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>

answered Sep 11 '15 at 13:27

Moncef Hassein-bey

1,361
9
14

I'm using the quantity entered by the user. That doesn't have to be passed to the controller since the form and the quantity are in the same file. So if the user enters 3 then I want on form with 3 sets of input fields. Does that make sense? – steverh Sep 11 '15 at 15:13

score 1 · Answer 3 · answered Sep 11 '15 at 13:57

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>

Angularjs repeat form fields

3 Answers3