How to add the number of new html elements based on the number entered in ng-model

Question

I am new to angular. I am trying to add input icons / tags based on the value entered in the model.

eg. I have a model seat

  <input ng-model ="seat" >  //lets say user enters 3

I want to dynamically generate three models as

<input ng-model="seat.seat1">
<input ng-model="seat.seat2">
<input ng-model="seat.seat2">

Thanks in advance.

+3

Mayur randive Feb 25 '14 at 4:18

2 answers

Chen-tsu lin · Answer 1 · 2014-02-25T04:41:49+0000

Initial $scope.seatsin the controller:

$scope.seats = [];

And add below code to the template:

<input ng-model="seats.length">
<input ng-repeat="seat in seats track by $index" ng-model="seats[$index]">

when changed seats.lengthto 3it will temporarily add null to the array.

$scope.seats // [null, null, null]

Therefore, it must be used track by $indexto avoid problems with the same value.

Anita · Answer 2 · 2014-02-25T04:28:07+0000

ng-repeat , .