CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Mayur Randive
Mayur Randive

Reputation: 643

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

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

e.g. 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 ..

Upvotes: 3

Views: 49

Answers (2)

Chen-Tsu Lin
Chen-Tsu Lin

Reputation: 23234

Initial $scope.seats in Controller:

$scope.seats = [];

And add below code to Template:

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

when change the seats.length to 3, it will add null to array temporarily.

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

So must to use track by $index to avoid same value issue

Demo on plnkr here

Upvotes: 2

Anita
Anita

Reputation: 2400

Use ng-repeat and repeat the loop till the model value and inside that create the models.

Upvotes: 1

Related Questions