json数据未在html列表中断行_Html_Json_Angularjs

json数据未在html列表中断行

html json angularjs

json数据未在html列表中断行,html,json,angularjs,Html,Json,Angularjs,我正在加载一个json文件中的数据，我计划在html列表中使用该文件中的链接，我不确定问题是如何编写json文件还是如何访问文件中的数据根据json文件是正确的 menu.json文件 [ { "opciones": { "oferta": [ { "tipo": "1001" }, {

我正在加载一个json文件中的数据，我计划在html列表中使用该文件中的链接，我不确定问题是如何编写json文件还是如何访问文件中的数据

根据json文件是正确的

menu.json文件

[
    {
        "opciones": {
            "oferta": [
                {
                    "tipo": "1001"
                },
                {
                    "tipo": "1002"
                },
                {
                    "tipo": "1003"
                },
                {
                    "tipo": "1004"
                }
            ]
        }
    },
    {
        "opciones": {
            "demanda": [
                {
                    "tipo": "2001"
                },
                {
                    "tipo": "2002"
                },
                {
                    "tipo": "2003"
                }
            ]
        }
    }
]

以下是我如何尝试填写html列表代码：

    <html ng-app="App">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
  <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <title>test html</title>

   <script src="json_load_menu.js"></script>   <!--script que cargar archivo json-->
  <link rel = "stylesheet"   type = "text/css"   href = "./css/style.css" />  <!--css con colores de celdas -->
  </head>

<body ng-controller="menuCtrl">

<div class="container">

    <ul >
        <li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta}}</a></li>
    </ul>

    <ul >
        <li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.demanda}}</a></li>
    </ul>

</div>

</body>
</html>


测试html

结果是：

[{“tipo”：“1001”}，{“tipo”：“1002”}，{“tipo”：“1003”}，{“tipo”：“1004”}]
*
- [{“tipo”：“2001”}，{“tipo”：“2002”}，{“tipo”：“2003”}]
  *

应该做什么：

*1001
*1002
*等

*2001年

*2002年

如何避免这种情况

编辑：我试过了

<ul >
        <li ng-repeat="menuOpcion in menu"><a href="#" >{{menuOpcion.opciones.oferta.tipo}}</a></li>
    </ul>

试试看

你能提供一把小提琴吗？请问一个问题。不，现在列表是空的

<ul>
  <li ng-repeat="menuOpcion in menu[0].opciones.oferta"><a href="#" >{{menuOpcion.tipo}}</a></li>
</ul>

<ul >
  <li ng-repeat="menuOpcion in menu[0].opciones.demanda"><a href="#" >{{menuOpcion.tipo}}</a></li>
</ul>