How to send value of dropdown in backend in angularjs? - angularjs

Question

I am using Spring + AngularJS. How to send value of dropdown in backend in angularjs?
HTML:
<div class="col-md-4">
<select ng-model="algoList">
<option ng-repeat="algo in algoList" value="{{algo}}">{{algo}}</option>
</select>
<button class="btn btn-primary" ng-click="applyAlgo()">
<span class="glyphicon glyphicon-right"></span> Apply
</button>
</div>
JS:
$scope.algoName = "";
$scope.algoList= ["DC_CleaningOperations","FilerOperation"];
$scope.applyAlgo = function() {
var response = $http.post('/idw-dv/getAlgo', $scope.algoName);
response.success(function(data, status, headers, config) {
swal("Following algorithm is applied successfully. :",data,"success");
console.log(data);
});
response.error(function(data, status, headers, config) {
swal( "Exception details: " + JSON.stringify({data: data}));
});
Controller:
#RequestMapping(value = "/getAlgo", method = RequestMethod.POST)
#ResponseBody
public String getAlgorithm(#RequestBody String algoName) {
return algoName;
}

Answer 1

So here was the problem, the model you defined for select field is wrong and will eventually lead you to problem.
The selected value from dropdown will now be stored in algoName if you change the ng-model to "algoName".
This value will now be transferred to Spring Controller as a String.
Hope this works...
<div class="col-md-4">
<select ng-model="algoName">
<option ng-repeat="algo in algoList" value="{{algo}}">{{algo}}</option>
</select>
<button class="btn btn-primary" ng-click="applyAlgo()">
<span class="glyphicon glyphicon-right"></span> Apply
</button>
</div>