On my .jsp web page, I am facing an issue with an AngularJS nested dropdown menu:
<div ng-controller="AlgoController">
<select ng-model="myModel" ng-options="model.name group by model.shade for model in models"></select>
Although I can easily display the selected menu item's value using {{myModel.swValue1}}, I need to pass this value to my JSP code so it can determine which Java code to run.
If it were a plain JavaScript variable, I could pass it into JSP like this:
<script>
var v = "I am the selected menu item";
</script>
<br><br><br>
<%
String st="<script>document.writeln(v)</script>";
out.println("value="+st);
%>
It has been suggested that I try something like:
<script>
var v = $scope.myModel;
</script>
or
<script>
var v = myModel.name;
</script>
However, these approaches seem to leave v undefined.
My latest attempt, still unsuccessful, is:
<script>
var scope = angular.element($("body")).scope();
var v = scope.myModel;
</script>
<br><br><br>
<%
String st="<script>document.writeln(v)</script>";
out.println("value="+st);
%>
Inspired by a related Plunkr, I added id="mymenu" to the select element and tried accessing its value:
<script>
var v = window.document.getElementById("mymenu").selectedIndex;
document.writeln(v);
</script>
Unfortunately, this always returns -1. It seems that regular JavaScript does not communicate well with Angular, and vice versa.