How to dynamically create multiple form input fields with incremented ng-models?

Question

After reading this article, I understand how to dynamically add a form field using ng-repeat.

I am wondering how can multiple form elements be dynamically created with incrementing ng-model values.

For example, the following would be created from a button click.

<input ng-model="vm.foo.bar1.first">
<input ng-model="vm.foo.bar1.second">
<input ng-model="vm.foo.bar1.third">
<input ng-model="vm.foo.bar1.fourth">

<input ng-model="vm.foo.bar2.first">
<input ng-model="vm.foo.bar2.second">
<input ng-model="vm.foo.bar2.third">
<input ng-model="vm.foo.bar2.fourth">

<input ng-model="vm.foo.bar3.first">
<input ng-model="vm.foo.bar3.second">
<input ng-model="vm.foo.bar3.third">
<input ng-model="vm.foo.bar3.fourth">

How can this be done?

New Dev · Accepted Answer · 2015-02-03 00:00:22Z

1

I would suggest to restructure your ViewModel to make vm.foo.bar an array. Then this would be trivial:

<div ng-repeat="item in barItems">
  <input ng-model="vm.foo.bar[$index].first">
  <input ng-model="vm.foo.bar[$index].second">
  <input ng-model="vm.foo.bar[$index].third">
  <input ng-model="vm.foo.bar[$index].fourth">
</div>

Or, if you insist, then also

<div ng-repeat="item in barItems" ng-init="outerIdx = $index">
   <input ng-repeat='p in ["first", "second", "third", "fourth"]' 
          ng-model="vm.foo.bar[outerIdx][p]">
</div>

(I'm assuming here, that unlike with first, second, etc..., the number of bars is not known - hence an array is a better option)

EDIT:

If you really want, you could also make vm.foo an object that holds properties bar1, bar2, etc...:

<div ng-repeat="item in [1, 2, 3, 4]">
  <input ng-model="vm.foo['bar' + item].first">
  <input ng-model="vm.foo['bar' + item].second">
  <input ng-model="vm.foo['bar' + item].third">
  <input ng-model="vm.foo['bar' + item].fourth">
</div>

but don't forget to first create vm.foo object in the controller:

this.foo = {};

edited Feb 3, 2015 at 0:00

answered Feb 2, 2015 at 23:42

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

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

1 Comment

Raphael Rafatpanah Over a year ago

Thanks for your thorough answer. In my case, vm was set to this in the controller to replace $scope.

ribsies · Accepted Answer · 2015-02-02 23:35:41Z

1

When I have to do this I use the $index to control the names of things. Although I've never tried this exact code, this should work.

<input ng-model='vm.foo.bar3[$index]'></input>

$index comes along whenever you do ng-repeat and is just the index of the list item. So that should end up making ng-models that are vm.foo.bar3.0 to whatever.

answered Feb 2, 2015 at 23:35

ribsies

1,2182 gold badges10 silver badges16 bronze badges

Comments

Jean-Baptiste Louazel · Accepted Answer · 2015-02-02 23:35:21Z

0

To my point of view, you should create arrays of models in your controller.

$scope.vm.foo = [{
    bar1: [{
        first: '',
        second: '',
        ...
       },
    bar2: ...
  ],
}]

And then in your view iterate on your tab :

<div ng-repeat="elem in foo">
    <div ng-repeat="input in elem">
        <input ng-model="input">
    </div>
</div>

Hope it will help you !

answered Feb 2, 2015 at 23:35

Jean-Baptiste Louazel

5254 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to dynamically create multiple form input fields with incremented ng-models?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related