Dynamic length form with angularjs

Question

I want to expand a basic angularjs form so that it can have a dynamic number of inputs. Basically I want to create a user that can have 1 or more siblings. If you click a + button on the form it will add an additional sibling input to the form and keep them as an array. What concepts would I use to accomplish this in angular?

How can I add elements to a partial view in angular when the user clicks? And how can I make those inputs be kept as an array?

<div ng-controller="Controller">
  <form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    Siblings: <input type="text" ng-model="user.sibling[0]" /><br />
     <a href="#" name="moresiblings">+</a>
  </form>
  <pre>form = {{user | json}}</pre>
</div>

charlietfl · Accepted Answer · 2013-10-31 04:15:17Z

3

Wrap the siblings in ng-repeat

<span ng-repeat="sibling in user.siblings"><input type="text" ng-model="sibling" /></span>

Then when you add a new one push it to the user.sblings array in scope

answered Oct 31, 2013 at 4:15

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Comments

hiattp · Accepted Answer · 2013-10-31 04:19:31Z

2

I would suggest using ng-repeat on the sibling inputs, and attaching an ng-click function to your moresiblings link that pushes new siblings into the user.siblings array. Here is a fiddle that demonstrates the concept.

edited Oct 31, 2013 at 4:19

answered Oct 31, 2013 at 4:13

hiattp

2,3361 gold badge20 silver badges24 bronze badges

Collectives™ on Stack Overflow

Dynamic length form with angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related