Using Angular.js with multiple html select fields, ng-repeat (and ng-model)

Question

I'm trying to use angularjs with multiple html select fields and I want to store all the selected elements in an array.

May code would look like this:

<body ng-app="" ng-controller="myController">
{{selectedElements}}
<div ng-repeat="elem in selectedElements">
    <select 
        ng-model="elem.someThing"   <-- I do not want the someThing here
        ng-options="obj.name for obj in objects">
     </select>

    {{elem}}
</div>
<script>
    var myController = function ($scope) {
        $scope.selectedElements = [{},{}]

        $scope.objects = [
            {"id": "1234","name": "a"}, 
            {"id": "12345","name": "b"},
            {"id": "123456","name": "b"},
            {"id": "123458","name": "c"}
        ];
    };
</script>

You can also find a fiddle here: http://jsfiddle.net/dg76hetu/12/

The issue is, that I do not really want to use:

ng-model="elem.someThing"

because my selectedElements Array then includes "someThing" as a key. (see in fiddle) Intuitively I would want to do something like:

ng-model="elem"

However, this does not work and I am also aware that I should not bind to the model without the dot notation.

So my question is, how can I use angular to store all the selected objects from the multiple select fields inside the "selectedElements" Array? I feel like I am missing something basic, however I just can't get it to work.

Any help is highly appreciated.

You need a model per each element in selectedElements, otherwise you will be binding both values in the view to the same controller variable. — Javier Conde
– Javier Conde, Commented Nov 16, 2015 at 16:51

Appeiron · Accepted Answer · 2015-11-16 16:46:30Z

2

You can link ng-model to actual value using $index and passing array[$index] in to ng-model directly.

answered Nov 16, 2015 at 16:46

Appeiron

1,0617 silver badges14 bronze badges

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

5 Comments

Kito Over a year ago

thanks for you quick answer. This actually works great. However, I would also like to have the html select element be initialised if my selectedElements Array would as an example look like so: $scope.selectedElements = [{"id": "1234","name": "a"},{}]. Any idea on how that could be realised with your solution?

Kito Over a year ago

say my array called "$scope.selectedElements" is already initialised with some object(s) instead of those empty objects[{},{}], I would like this to be reflected in the html select field. In other words, the html select field should then already be preselected if the array called "$scope.selectedElements" already contains an element at the beginning. Like this: jsfiddle.net/z1aujv1x

Appeiron Over a year ago

You need to link actual Object but not copy of them. To do that create linking function that will run though selectedElements, find appropriate actual Object in objects and link it to origin selectedElement[i] = objects[j]

Appeiron Over a year ago

jsfiddle.net/dg76hetu/15 here is what u want to achieve (with that function that link Objects)

Kito Over a year ago

exactly. This is perfect. Thanks a lot :)

Collectives™ on Stack Overflow

Using Angular.js with multiple html select fields, ng-repeat (and ng-model)

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related