Form input arrays in angular

Question

I am learning Angular.js and i've come to a problem that should probably be simple, but I can't seem to find an answer on.

I want to create form inputs with the value of "connectedTeams", like this in html:

<input type="text" name="connectedTeam[]"> 
<input type="text" name="connectedTeam[]"> 
<input type="text" name="connectedTeam[]">

I have tried the following in angular...

<input type="text" name="connectedTeams[]" class="form-control" ng-model="user.connectedTeams">

...but it is binding the same value to all 3 inputs. I know in my mind that this makes sense, but I can't seem to figure out how to tell it that ng-model is user.connectedTeams.[] (user > connectedTeams > add to an array.

I hope this makes sense enough for someone to provide a quick answer.

The name property has no effect on the binding...

tymeJV
– tymeJV

2015-01-26 16:24:58 +00:00
Commented Jan 26, 2015 at 16:24 — tymeJV
– tymeJV, Commented Jan 26, 2015 at 16:24
i.e. <input type="text" ng-model="user.connectedTeams[2]">?

Petr Averyanov
– Petr Averyanov

2015-01-26 16:26:39 +00:00
Commented Jan 26, 2015 at 16:26 — Petr Averyanov
– Petr Averyanov, Commented Jan 26, 2015 at 16:26

maxisam · Accepted Answer · 2015-01-26 16:25:48Z

9

 ng-model="user.connectedTeams[0]"
 ng-model="user.connectedTeams[1]" and so on

You can put it in a ngRepeat, so you don't need to repeat your code like above.

FYI, name is only used for validation in Angularjs.

answered Jan 26, 2015 at 16:25

maxisam

22.9k9 gold badges83 silver badges87 bronze badges

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

2 Comments

Daniel White Over a year ago

Thank you. I had just figured this out and was going to answer my own question. So I guess that if i was doing an add / remove row, i'd just set a variable like $scope.i = 0; and then every time i click add it would increase or decrease the value of $i?

maxisam Over a year ago

you should read ngRepeat doc. There is an $index you can use.

Collectives™ on Stack Overflow

Form input arrays in angular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related