html input name="foo[]" in ng-model

Question

Sorry cant think of a more valid title. In HTML when we want multiple values for a given name we use this name="foo[]" attribute.

When the data is posted it comes as an array. What I want is this functionality with ng-model in angular.

Reason: I have a form that has multiple fields with same name, like in a CV when we write our past experiences.

NB: Before saying this is a duplicate, please read this properly. I have seen valid questions being marked as duplicate and not constructive.

Did u try with something like described here: stackoverflow.com/questions/21631700/… ? — Mindastic
– Mindastic, Commented Jul 28, 2015 at 13:38
In angular it does not matter what name input has (names are mainly used only for validation purposes). If creating CV form, you shall write ng-repeat="experience in experiences" and inside it write something like this: <input type="text" ng-model="experience.from"/>. $scope.experiences = [...]. If you want to add more experience you should add another object to $scope.experiences array. — karaxuna
– karaxuna, Commented Jul 28, 2015 at 13:42
To complete @karaxuna answer you just need to manage a collection (with some "add" and "remove" buttons) using a ng-repeat. — Okazari
– Okazari, Commented Jul 28, 2015 at 13:47
@Mindastic I didn't find that. Couldn't make up words for this thing. -.-' Its some what near to what I want but I don't want to be a numbered thing unless its the only way — echo_salik
– echo_salik, Commented Jul 28, 2015 at 13:47
I am not using ng-repeat actually. but this seems like a nice idea. Using ng-repeat. — echo_salik
– echo_salik, Commented Jul 28, 2015 at 13:50

biancamihai · Accepted Answer · 2015-07-28 13:48:30Z

3

If in your angular controller you have something like this:

$scope.foo = []; //your values in the array

You can have in your view something like this:

<dd ng-repeat="item in foo">
    <input type="text" ng-model="foo[$index]" value="{{item}}" required/>
</dd>

This is what you need? No need for name if you use ng-model you have the data in the model on form submit.

answered Jul 28, 2015 at 13:48

biancamihai

9816 silver badges14 bronze badges

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

4 Comments

Its not an ng-repeat thing. Im not using ng-repeat. I am adding it via jQuery append and $complie.

@echo_salik That's probably why you can't achieve that. You shouldn't jQuery within angular at all.

I am new to angular actually. This way, creating an array seems the best way, is the best idea yet. Thanks all.

You try to create an angular app but you think in jquery :) stackoverflow.com/questions/14994391/…