角度ng-repeat显示对象项目

Question

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

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

的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小提琴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检查器检查数据的外观。

Answer 2

看起来从json对象返回的数据与绑定选择器不一致。 在ng-repeat内部，你正在考虑对parks的范围进行整理。

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

对于图像，因为它们在另一个阵列中，您将不得不执行另一次重复以获取所有图像。请注意，嵌套的ng-repeats可能会导致负面的性能影响。

Answer 3

根据您的代码，您应该遍历parks.parks以到达$scope.parks对象的数组。

此外，在ng-repeat你应该使用item.*而不是item.parks.*

这是JSFiddle的固定代码： https ：//jsfiddle.net/x0ja420L/

Answer 4

您的代码中已进行了一些代码更改：

• 正确关闭HTML标记以正常工作。

使用<h2>{{item.park_name}}</h2>代替<h2>{{item.park_name}}<h2>

• ng-repeat指令迭代数组对象，所以如果你想访问park_name你必须使用像ng-repeat那样的ng-repeat="item in parks.parks"

演示！

Answer 5

ng-repeat指令遍历数组对象，因此，如果您要访问park_name你必须使用ng-repeat这样的ng-repeat="item in parks.parks" ，代码应该喜欢这个

  <li ng-repeat="item in parks.parks">
  <div class="info">
    <h2>{{item.park_name}}<h2>
    <h2>{{item.park_size}}<h2>
    <h2>{{item.open_times}}<h2>
    <h2>{{item.days_closed}}<h2>
    <img ng-src="images/{{item.images[0].short}}.jpg">
  </div>
</li>

你可以看到演示