From the Java side, I am receiving a list as [Pune, Mumbai, Delhi]. I would like to display this vertically. How can I achieve that? I initially attempted to do this in AngularJS, but for some reason, the function is not being called upon click. The desired output:
Pune
Mumbai
Delhi
Controller:
@RequestMapping(value = "/home.web", method = RequestMethod.GET, produces = {"application/xml",
"application/json" })
public ModelAndView getUSCity(@RequestParam ("statechoice") String statechoice) {
List<String> msa = new ArrayList<String>();
msa = msaService.getMsaCodes(statechoice);
ModelAndView model = new ModelAndView("Home");
model.addObject("city",msa);
return model;
}
JSP after removing the ng directives for Angular:
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<!-- <script>
var app = angular.module('myApp', []);
function MyController($scope, $http) {
$scope.getPersonDataFromServer = function() {
alert("Hi");
$http({
method : 'GET',
url : 'home.web'
}).success(function(data, status, headers, config) {
alert(data);
$scope.cities=data;
}).error(function(data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
};
</script>
-->
</head>
<body style="text-align: center;">
<h4>US map</h4>
<div>
<img src="images/usmap.gif" alt="US MAP" width="529" height="334"
border='0' usemap='#usimage' align="middle">
</div>
<div>
<map name='usimage'>
<area shape='polygon' coords='489,52,502,31,513,32,518,54,490,71'
href='home.web?statechoice=ME' target="_self" alt='Maine'>
</map>
</div>
<div>
<table border="1" style="margin-top: 20px;">
<tr style="background-color: lightgray;">
<th>Cities</th>
<tr>
<td>${city}</td>
</tr>
</div>
</body>
</html>
When using Angular's ng-repeat, div tags were used:
<body style="text-align: center;" data-ng-app="myApp" data-ng-controller="MyController">
<h4 > US map</h4>
<div>
<img src="images/usmap.gif" alt="US MAP" width="529" height="334" border='0' usemap='#usimage' align="middle">
</div>
<div>
<map name='usimage'>
<area shape='polygon' coords='489,52,502,31,513,32,518,54,490,71' data-ng-click="getPersonData()" href='home.web?statechoice=ME' target="_self" alt='Maine'>
</map>
</div>
<div>
<table border ="1" style="margin-top: 20px;">
<tr style="background-color:lightgray;">
<th>Cities</th>
<ul>
<li ng-repeat="city in cities">{{city}}</li>
</ul>
</div>
</body>
</html>
Update - The function is now being called. However, the values are not updating.
Using routing:
<script>
var app = angular.module('myApp', ['ngRoute']).
module.config(function($routeProvider){
$routeProvider
.when('/home.web',{
templateUrl: 'Views/Home.jsp',
})
})
function MyController($scope, $http) {
$scope.getPersonData = function() {
$http({
method : 'GET',
url : 'home.web'
}).success(function(data, status, headers, config) {
alert(data);
$scope.cities = data;
}).error(function(data, status, headers, config) {
console.log("error");
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
};
</script>