Question

我从java端获得了一个列表[Pune，Mumbai，Delhi]。我希望这个列表垂直显示。我怎样才能做到这一点。我想在角度js中执行此操作，但不知何故该功能未在点击时调用。输出我需要 -

Pune
Mumbai
Delhi

控制器 -

@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;
    }

删除了angular -

的ng指令后的

jsp

<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'>
            <!--- BEGIN: East --->
            <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>

当我使用角度ng-repeat时，

div标签。

   <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'>
            <!--- BEGIN: East --->
            <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>

更新 - 现在调用函数gettng。但值不会更新。

使用路由 -

<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>

Answer 1

检查这个

https://plnkr.co/edit/tpl:8rFfZljYNl3z1A4LKSL2?p=preview

{{1}}

Answer 2

您遗失了</table>和</tr>

  <table border="1" style="margin-top: 20px;">
    <tr style="background-color: lightgray;">
      <th>Cities</th>
    </tr>
    <tr data-ng-repeat="city in cities">
      <td>{{city}}</td>
    </tr>
    <table>

＆＃13;

var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
  $scope.cities=['Bengaluru','Mumbai','Hyderabad'];
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<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'>
    <!--- BEGIN: East --->
    <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>
    <tr data-ng-repeat="city in cities">
      <td>{{city}}</td>
    </tr>
    <table>
</div>

＆＃13;

从代码中删除ModelAndView

@RequestMapping(value = "/home.web", method = RequestMethod.GET, produces = "application/json")

    public List<String> getUSCity(@RequestParam ("statechoice") String statechoice) {


        List<String> msa = new ArrayList<String>();     
        msa = msaService.getMsaCodes(statechoice);

        return msa;
    }

在html

2 个答案: