Question

我对角度有些新意，目前我通过为学校制作项目来学习这个美丽的框架。但我遇到了一个我目前无法解决的问题。我在互联网上搜索了很多，但没有找到适合我的东西。

这是我的控制器，其中包含JSON

(function() {
      app.controller('imageController', function(){

       this.imageList = imageJson;
      });

        var imageJson = [{
            "traveling": [{
                "name": "Kenneth Appiah",
                "label": "pisa",
                "src": "public/media/images/noun/traveling/pisa.svg"
            },
            {
                "name": "Oliver TubeGeometry",
                "label": "eiffel tower",
                "src": "public/media/images/noun/traveling/eiffel.svg"
            },
            {
                "name": "Adriano Gazzellini",
                "label": "colosseum",
                "src": "public/media/images/noun/traveling/colisseum.svg"
        }]
    }];

})();

我正在使用，我称之为两层JSON（只是希望你理解我在这里的意思:-)）。但由于某种原因，我无法在我的HTML上的数据标记中获取这些数据。我做了一些有角度的基本教程，并且学习了如何使用json开始这样做，而不是从以下内容开始：

    "traveling": [{
            "name": "Kenneth Appiah",
            "label": "pisa",
            "src": "public/media/images/noun/traveling/pisa.svg"
        }]

但是像这样：

{
                "name": "Kenneth Appiah",
                "label": "pisa",
                "src": "public/media/images/noun/traveling/pisa.svg"
            }

所以我的假设是我的数据绑定就像{{image.traveling.src}}。图像是我称之为ng-repeat的方式。但这没用，所以我有点困惑。

这是我的HTML（ng-app也包含但它在差异文件中）

<section class="words">
    <div class="colored-sidebar"></div>
    <!-- content -->
    <div class="previous-button"></div>
    <div class="word-container" ng-controller="imageController as imageCtrl">
      <h1><span>noun</span>words</h1>
      <div class="category-body">
        <p><span>noun</span>traveling</p><hr>
        <div class="category-image" ng-repeat="image in imageList.traveling">
          <img src="{{image.src}}" />
        </div>
    </div>
  </section><!--
--></div>

由于我的反复试验，我目前处于隧道视野中。也许这是我监督的事情，但我希望对我的问题有一些积极的反馈和批评。如果我错过任何需要的代码，请知道我很乐意发布它，所以有人可以帮助我更好:-) 我还没有和JSON一起工作，但是如果它是一个菜鸟问题那就很抱歉

谢谢！

Answer 1

问题在于你的json对象。如果您将json格式化为如下所示，它将起作用。

var imageJson = {
            "traveling": [{
                "name": "Kenneth Appiah",
                "label": "pisa",
                "src": "public/media/images/noun/traveling/pisa.svg"
            },
            {
                "name": "Oliver TubeGeometry",
                "label": "eiffel tower",
                "src": "public/media/images/noun/traveling/eiffel.svg"
            },
            {
                "name": "Adriano Gazzellini",
                "label": "colosseum",
                "src": "public/media/images/noun/traveling/colisseum.svg"
            }]
        };

Answer 2

试试这样。我会工作

var imageJson=[{
                "name": "Kenneth Appiah",
                "label": "pisa",
                "src": "public/media/images/noun/traveling/pisa.svg"
            },
            {
                "name": "Oliver TubeGeometry",
                "label": "eiffel tower",
                "src": "public/media/images/noun/traveling/eiffel.svg"
            },
            {
                "name": "Adriano Gazzellini",
                "label": "colosseum",
                "src": "public/media/images/noun/traveling/colisseum.svg"
        }];

使用ng-repeat="image in imageList" ....一定会有效

Ng重复角度“2层”JSON问题

2 个答案: