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",
interni":
[{"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"}],
"start_event":"2020-04-13T06:00:00.000Z",
"end_event":"2020-04-13T12:00:00.000Z","event_note":null}]
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");
newDiv.appendChild(selectList);
AddMenu.appendChild(newDiv);
// 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.
FOCUS HERE
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!
example:
<ul><li>
<select ng-model='selectedItem' name="select{{$index}}" id="select{{$index}}"
ng-options="item.label for item in sostituti track by item.value">
</select>
</li></ul>
the output in view are two select with **
id=“select”+i
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.
WORKING CODE START POINT
JSBIN DEMO