在html中垂直显示列表答案

【问题标题】：displaying list vertically in html在html中垂直显示列表
【发布时间】：2016-12-26 12:18:06
【问题描述】：

我从 java 端得到一个列表，名称为 [Pune, Mumbai, Delhi]。我希望它垂直显示。我怎样才能做到这一点。我想在 Angular 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;
    }

移除 ng 指令后的 jsp 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'>
            <!--- 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>

div 标签，当我使用 angular ng-repeat 时。

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

更新 - 现在调用函数。但是这些值没有得到更新。

使用路由 -

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

【问题讨论】：

我想你忘了关闭 tr 标签
<ul> 不是<tr> 的有效子代

标签： html css angularjs spring-mvc

【解决方案1】：

检查一下

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

<ul>
<li ng-repeat="city in cities">{{city}}</li>
</ul>

【讨论】：

由于某种我无法弄清楚的原因，我的函数没有被调用。这就是为什么这没有给出任何结果。
好的。我认为您错过了在 html 中包含 ng-controller="myCtrl"

【解决方案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>

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

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

从您的代码中删除 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;
    }

【讨论】：

谢谢。这工作正常。我猜我的代码中的问题来自于 spring mvc 方面。我不知道如何从 java 端将数据发送到 angular
@themaster 发布问题。会帮助你的。
嗨，我也粘贴了控制器代码。我已对 angular js fnc 中的错误发出警报。当我点击时，它会进入错误部分而不是成功。你还需要什么
在使用 Angular js 时，我们是否以这种方式使用 modelAndView 对象？
当我删除 modelAndView 时，它在整个页面中显示为 ["Pune","Mumbai","Delhi"] 的值。带有地图的现有页面消失了。可能是由于 URL 的更改。我希望在同一页面上更新值。原因我尝试使用模型和视图，以便我可以重新打开同一页面