AngularJS 从 JSON 本地文件中获取数据

Question

我在使用以下结构从 json 文件中检索数据时遇到问题。 在我的 controller.js 文件中，我有：

var controllers = angular.module('hotels.controllers', []);

controllers.controller('AppCtrl', function ($scope, $http){

   $scope.list;

   $http.get('json-folder/name.json').success(function(data, status, headers, config) {

    $scope.list = data.data;
    console.log(data);


});

在那个 name.json 文件中，我有以下结构：

{
   "hotel": [
     {
       "id": 1,
        "name": "Some hotel name",
        "address": "123 Street",
        "category" : [{
            "id": 1,
            "name" : "Category 1",
            "bnb" : "yes",
            "simple" : "some value",
            "double" : "another value"
         },
         {
            "id": 2,
            "name" : "Category 2",
            "bnb" : "no",
            "simple" : "some value 2",
            "double" : "another value 2"
         },
        {
            "id": 3,
            "name" : "Category 3",
            "bnb" : "no",
            "simple" : "some value 3",
            "double" : "another value 3"
         }
         ]
      },
      {
        "id": 2,
        "name": "Some hotel name 2",
        "address": "33333 Street",
        "category" : [{
             "id": 1,
             "name" : "Category 1",
             "bnb" : "yes",
             "simple" : "some value",
             "double" : "another value"
         },
         {
            "id": 2,
            "name" : "Category 2",
            "bnb" : "no",
            "simple" : "some value 2",
            "double" : "another value 2"
         },
         {
            "id": 3,
            "name" : "Category 3",
            "bnb" : "no",
            "simple" : "some value 3",
            "double" : "another value 3"
         }
        ]  
        }
    ],
    "motel": [
        {
          "id": 1,
          "name": "Some motel name",
          "address": "321 Street",
          "category" : [{
              "id" : 1,
              "name" : "Category Motel 1",
              "bnb" : "yes",
              "simple" : "some motel value",
              "double" : "another motel value"
           },
           {
             "id" : 2,
             "name" : "Category Motel 2",
             "bnb" : "no",
             "simple" : "some motel value 2",
             "double" : "another motel value 2"
           }
           ]
       }
     ]
}

最后是我的 html 结构：

<div ng-controller="AppCtrl">
    <ul class="pull-left">
        <li class="pull-left" ng-repeat="hotel in list.hotels">
            {{hotel.name}}
        </li>
    </ul>
</div>
<div ng-controller="CatCtrl">
      <ul class="pull-right">
          <li class="pull-right" ng-repeat="cat in list.categories">
              {{cat.name}}
          </li>
      </ul>
  </div>

我没有得到任何回报，也没有任何错误... 我想要的是一个带有酒店名称的 ul li，在另一个类似的 div 中，我想再次列出类别名称以及来自酒店下类别的其他数据。请注意，CatCtrl 与 AppCtrl 相同...

知道我第一个做错了什么，我应该在其他控制器中进行哪些更改以获得我需要的内容？

谢谢。

Answer 1

现在您已经正确理解了第一部分，获取类别应该需要将代码更改为：

<div ng-controller="AppCtrl">
    <ul class="pull-left">
        <li class="pull-left" ng-repeat="hotel in list.hotel">
            {{hotel.name}}
            <ul class="pull-right">
                <li class="pull-right" ng-repeat="cat in hotel.category">
                    {{cat.name}}
                </li>
            </ul>
        </li>
    </ul>
</div>

我将依靠您的 CSS 技能来正确排列显示。