Getting option selected from two selects create dinamically - AngularJS

Hi to all community members. It is not easy to decribe the problem but i’ll try.
So my script after getting json from an http call, fill a form fields.

In the fetched json i have a property named “interni” as array with (in this example) two objects nested:

[{"id":"8744","title":"RM 1.5","resourceid":"5","description":"rm 1.5",
[{"id_mese":"04","mese":"aprile","student_id":"79","student_year_id":"4","student_name":"Vit Da","id_sezione":"5","sezione":"rm"},{"id_mese":"04","mese":"aprile","student_id":"34","student_year_id":"2","student_name":"Muni Val","id_sezione":"5","sezione":"rm"}],


As you can see there are two peoples in interni array and for each one i need to add “status” by radio value: “present” and “absent”. But that’s not the problem!

In the case of absence, i need to provide a list of possible substitutes for each of them by
<select></select>. filled from a second http call

in javascript, after parse a secon json call, i can do this as is

for (var i =0; i< internalPeoples.lenght; i++){
      var newDiv = document.createElement("div");
            newDiv.setAttribute("class", "myClass" + i);
            newDiv.setAttribute("id", "myClass" + i);
            newDiv.setAttribute("style", "padding:6px;");

            var selectList = document.createElement("select");
            selectList.setAttribute("id", "mySelect" + i);
            selectList.setAttribute("name", "mySelect" +i);
          //  console.log("mySelect" + i);
            selectList.value = _value;
            selectList.setAttribute("disabled", "disabled");
// and so on

in the same way I can create select in angularjs for any poeple in array, in this case 2 but this is not fix.

THE PROBLEM come up for getting selected value: I’m FRUSTRATED with this seemingly easy operation, but angularjs makes it really complicated.
Example in javascript getting selected value for each SELECT OPTION dinamically:

var sobstitutiesArray =[];
for(var z =0; z<internalPeoples.lenght; z++){
  var e = document.getElementById("select"+z).options[selectedIndex].value;
 sobstitutiesArray.push( {studentId: e });

Notice that i can create objects with a value getted from element id.

in angularjs for getting selected value i need to use ng-model declared in controller for each select list.
But i don’t know how many variables i need to declare before, because they are dynamic creations. they can be one, two or three: It is not fixed!


              <select ng-model='selectedItem' name="select{{$index}}" id="select{{$index}}"
                      ng-options="item.label for item in sostituti track by item.value">

the output in view are two select with **


but it is binding by selectedItem variable that is thesame for all select elements. So if i click at row 3 of the first select thish change reflect also on the second select.

let’s reason together:

  • we do not know the number of variables to declare in advance.
  • we need to get the value or entire object of selected item for each select in form.
    I need help from you tu understand teh possible solution.

what possibilities I thought

  • creating variables dynamically, but in controllers creating loops is not as easy as in javascirpt. Maybe onother solution?
  • take values from the DOM, although this practice does not suit angularjs.

what do you suggest?

nb - I tried to be as descriptive as possible, to better understand the model.


1 Like

That is an excellent post, giving lots of useful detail helping to expose the problem for what it is.

Sadly I can’t help much with Angular personally, but I just needed to congratulate you on the quality of your problem post. It’s a rare sight and a thing of beauty.

1 Like

Thanks Paul, I believe that explaining the origin of the problem and the possible reasoning is important. Thanks also for quicly reply

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.