Binding ng-model array to fixed number of textboxes

Question

How do I bind an ng-model that is an array to a fixed number of textboxes?

Let's say I have three textboxes and they are all optional, how do you bind the ng-model to those textboxes?

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

You can type into any textbox (e.g. textboxes 2 and 3 only) and when you save it, it's just going to be optionalField: ['text2', 'text3'].

Where you place the text doesn't matter; what matters is the order of the textboxes. So when you show the view again, it's just going to be bound to the first and second textboxes. If you only typed on the textbox 3, it will be bound to textbox 1 and so on.

UPDATE:

Just used dfsq's answer and modified it to return a filtered array of values. http://codepen.io/anon/pen/ozpxGq?editors=1011

Mohit Tanwani · Accepted Answer · 2016-10-05 09:08:01Z

2

In ng-repeat you can use $index

<input type="text" name="optionalField[]" ng-model="optionalField[$index]">

answered Oct 5, 2016 at 9:08

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

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

2 Comments

dork Over a year ago

I'm not going to use ng-repeat because there is going to be a fixed number of textboxes.

Mohit Tanwani Over a year ago

What do you mean by array of string ? can you give me example ?

dfsq · Accepted Answer · 2016-10-05 09:07:17Z

0

Like this:

<input type="text" name="optionalField[]" ng-model="optionalField[0]">
<input type="text" name="optionalField[]" ng-model="optionalField[1]">
<input type="text" name="optionalField[]" ng-model="optionalField[2]">

answered Oct 5, 2016 at 9:07

dfsq

193k26 gold badges244 silver badges261 bronze badges

1 Comment

dork Over a year ago

I tried this but got an object instead of an array. Is it possible to get the array of strings instead of having to convert it into an array? codepen.io/anon/pen/ozpxGq?editors=1011

Collectives™ on Stack Overflow

Binding ng-model array to fixed number of textboxes

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related