CODEWITHSUNDEEP
angularjs
bwbrowning
bwbrowning

Reputation: 6520

Dynamic length form with angularjs

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>

Upvotes: 1

Views: 129

Answers (2)

hiattp
hiattp

Reputation: 2336

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.

Upvotes: 2

charlietfl
charlietfl

Reputation: 171669

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

Upvotes: 3

Related Questions