Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I had to solve this exact problem recently. You essentially need to create an array of guest objects in your scope and then bind the array to a form using <code>ng-repeat</code>.</p> <p>See a working demo of my solution here: <a href="http://plnkr.co/edit/2aYSLYe0IcRGXR7Lm0HR?p=preview" rel="nofollow">http://plnkr.co/edit/2aYSLYe0IcRGXR7Lm0HR?p=preview</a></p> <pre><code>app.controller('MainCtrl', function($scope) { $scope.numberOfGuests = 1; $scope.guests = []; addGuests($scope.numberOfGuests); // When the number of guests changes, we want to repopulate the // array of guest info (in a non-destructive manner). $scope.$watch('numberOfGuests', function (newValue, oldValue) { if (!newValue) { return; } newValue = parseInt(newValue, 10); oldValue = parseInt(oldValue, 10); // If the number of guests increased, add some empty objects to the array. if (!isNaN(oldValue) &amp;&amp; newValue &gt; oldValue) { var numberOfGuests = newValue - oldValue; addGuests(numberOfGuests); } else { // Otherwise reset length of array $scope.guests.length = newValue; } }); function addGuests(numberToAdd) { if (!isNaN(numberToAdd) &amp;&amp; numberToAdd &gt; 0) { for (var i = 0; i &lt; numberToAdd; i++) { $scope.guests.push({}); } } } }); </code></pre> <p>Here's the view</p> <pre><code>&lt;body ng-controller="MainCtrl"&gt; &lt;form&gt; &lt;p&gt;Nunmber of Guests &lt;input type="number" ng-model="numberOfGuests" &gt;&lt;/p&gt; &lt;table&gt; &lt;tr ng-repeat="guest in guests track by $index"&gt; &lt;td&gt;{{$index + 1}}&lt;/td&gt; &lt;td&gt;&lt;input type="text" ng-model="guest.name"&gt;&lt;/td&gt; &lt;td&gt;&lt;input type="text" ng-model="guest.email"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;pre&gt;{{guests | json}}&lt;/pre&gt; &lt;/body&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload