javascript - Angular ng-repeat 显示对象项

Question

我在显示从异步 http 请求获取的 JSON 数组对象时遇到问题。

我已经使用 ng-repeat 尝试在 View 中显示对象，但几个小时后我没有运气。这是我到目前为止的代码。

index.html

<div class="main" ng-controller = "MyController">
<ul>
<li ng-repeat="item in parks">
  <div class="info">
    <h2>{{item.parks.name}}<h2>
    <h2>{{item.parks.park_size}}<h2>
    <h2>{{item.parks.open_times}}<h2>
    <h2>{{item.parks.days_closed}}<h2>
    <img ng-src="images/{{item.parks.short}}.jpg">
  </div>
</li>

controllers.js

var myApp = angular.module('myApp', []);
    myApp.controller('MyController', ['$scope', '$http', function($scope, $http) {
        $http.get('js/data.json').success(function(data) {
      $scope.parks = data;
      console.log(data);
    });
}]);

data.json

{
    "parks": [
        {
      "park_name": "Central Park",
      "park_size": {
                "miles": "1.2",
                "meters": "1900"
            },
      "open_times": {
                "Monday-Friday": "8am-10pm",
                "Saturday-Sunday": "10am-6.30pm"
            },
            "days_closed": [
                "December 25th",
                "December 26th"
            ],

      "images": [
                {
                    "short": "centralimage1.jpeg"
                },
                {
                    "short": "centralimage2.jpeg"
                },
                {
                    "short": "centralimage3.jpeg"
                },
                {
                    "short": "centralimage4.jpeg"
                }
            ]
        },
    {
      "park_name": "Riverside Park",
      "park_size": {
                "miles": "0.2",
                "meters": "320"
            },
      "open_times": {
                "Monday-Friday": "7am-9pm",
                "Saturday-Sunday": "9am-8.30pm"
            },
            "days_closed": [
                "December 25th",
                "December 26th",
        "Jamuary 1st"
            ],

      "images": [
                {
                    "short": "riversideimage1.jpeg"
                },
                {
                    "short": "riversideimage2.jpeg"
                },
                {
                    "short": "riversideimage3.jpeg"
                },
                {
                    "short": "riversideimage4.jpeg"
                }
            ]
        }





    ]
}

JS fiddle https://jsfiddle.net/owxwh0kz/

Answer 1

您已经在迭代公园，因此您的代码可以如下所示

<li ng-repeat="item in parks">
  <div class="info">
    <h2>{{item.park_name}}<h2>

(我将 item.park.name 更改为 item.park_name 以匹配您的数据)

否则，请使用 Angular 检查器检查数据的样子。