Dynamically adding a Form with AngularJs based on another input

Question

In my application I have a number picker and which you can increase and decrease thanks to Maike Daloo

Now I am trying to loop through the number and create form with inputs so that I can fill out the form and be able to post it.

Here is a Bin example of what I want to do

Q1

Can I dynamically add html from a controller?

Q2

Should I be using a directive and how can I do it?

Tom · Accepted Answer · 2015-03-10 15:13:08Z

2

What if you built an array of adults, myAdults, and then ng-repeated the form, like such: jsBin

<form ng-repeat="adult in myAdults">
  <h4>Hello</h4>
  <div class="form-group">
    <label class="col-lg-2 control-label">
      Email
    </label>
    <div class="col-lg-10">
      <input type="text" ng-model="adult.name" placeholder="Email"
             id="inputEmail" class="form-control" />
      {{adult}}
    </div>
  </div>
</form>

And the JS:

$scope.adults = 4;
$scope.children = 2;
$scope.myAdults = [];

for (i = 0; i < $scope.adults; i ++) {
  $scope.myAdults.push({});
}

So:

Can I dynamically add html from a controller? Yes, but you shouldn't

Should I be using a directive and how can I do it? If you went the route of dynamically generating the HTML, yes you should, if you go the route of using the built in ng-repeat, no need.

answered Mar 10, 2015 at 15:13

Tom

7,7401 gold badge26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anele Over a year ago

+1 Thank you so much. Now I can have ng-model="" inside the inputs or even the outer container because I will need it later on.

Collectives™ on Stack Overflow

Dynamically adding a Form with AngularJs based on another input

Here is a Bin example of what I want to do

Q1

Q2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here is a Bin example of what I want to do

Q1

Q2

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related