javascript - 无法从 Json 文件加载数据

Question

我想做的是创建图像网格布局。与此类似，但在每个框中都有一张通过 HTTP.get 从 json 文件加载的照片

我正在尝试通过创建第一行然后使用 ng-repeat 来创建网格布局，以便创建新行。

我正在从一个通过 JSON 文件加载图像的 $http.get 请求中检索我的图像。

我无法让图像显示，我不确定为什么。我的控制台日志中没有错误。

到目前为止，这是我的 HTML 代码。

<div class="row" ng-repeat="" ng-if="$index % 1 === 0">
  <div class="col col-33" ng-if="$index < length">
    <img ng-src="{{image.image}}">
  </div>
</div>

Answer 1

您看不到任何图像的原因是您没有在 HTML 中正确访问您的数据。试试这个:

<div class="row" ng-repeat="image in data.under9s">
<div id="container" class="col col-33" ng-if="$index < data.under9s.length">
    <img class="image image-list-thumb" id="image" ng-src="{{image.image}}" />
</div>
<div id="container" class="col col-33" ng-if="$index + 1 < data.under9s.length">
    <img class="image image-list-thumb" id="image" ng-src="{{data.under9s[$index + 1].image}}" />
</div>
<div id="container" class="col col-33" ng-if="$index + 2 < data.under9s.length">
    <img class="image image-list-thumb" id="image" ng-src="{{data.under9s[$index + 2].image}}" />
</div>

我认为您可以使用两次 ng-repeat 轻松完成您的网格。像这样的东西:

<div class="row" ng-repeat="category in data">
    <div ng-repeat="image in category" id="container" class="col col-33">
        <img class="image image-list-thumb" id="image" ng-src="{{image.image}}" />
    </div>
</div>