ng-repeat Angular 和 JSON 数组答案

【问题标题】：ng-repeat Angular and JSON arrayng-repeat Angular 和 JSON 数组
【发布时间】：2014-11-24 22:08:35
【问题描述】：

我是 Angular 的新手，我正在尝试设置一个简单的显示。我浏览了有关 ng-repeat 的文档，并且每次都成功地完成了一些教程。但是，当我自己做一个模拟时，我无法从 JSON 文件中得到任何显示。即使使用随处可见的常见 Angular “todo.json”示例，我仍然无法弄清楚这一点。我不确定它是否必须与 JSON 或可能嵌套 ng-repeat 相关。谁能指导我看到光明？！呵呵。提前致谢。

所以，这里是 Plunker 链接。 http://plnkr.co/edit/8rNgPHUHEe88Gpw6aM1D

HTML：

    <!doctype html>
<html ng-app="App" >
<head>
  <meta charset="utf-8">
  <title>Todos $http</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="Calendar">
  <ul>
    <li ng-repeat="items in events">
      {{items.events}}
    </li>
  </ul>
</body>
</html>

JS：

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

App.controller('Calendar', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.events = res.data;                
        });
});

JSON：

[
    {
        "events": [
            {
                "EventTitle": {
                    "href": "http://example.com/event1",
                    "text": "HEADLINE TEXT FOR EVENT 1"
                },
                "HeadlineImage": {
                    "href": "http://example.com/event1",
                    "src": "http://example.com/Image.jpg",
                    "text": "CAPTION TEXT FOR IMAGE "
                },
                "Eventdescription": "Lorem Loreem Loreeem Ipsum Ipsuum Ipsuuum ..."
            }
        ]
    }
]

【问题讨论】：

标签： arrays json angularjs angularjs-ng-repeat

【解决方案1】：

你的数据结构很奇怪。检查更新的工作插件：http://plnkr.co/edit/SXHjqxjZ2bgJSs327jz4?p=preview

您可以在视图中使用<pre>{{ events | json }}</pre> 轻松检查/调试对象。

【讨论】：

Hmm.. 既然 API 直接从 kimono.io 构造 JSON 这样的 JSON，有没有办法在这种特定格式下工作？

【解决方案2】：

如果你必须保持这个结构，那么你需要做这样的事情

<ul>
  <li ng-repeat="items in events">
    <a href="{{items.EventTitle.href}}">{{items.EventTitle.text}}</></a>
  </li>
</ul>

控制器：

App.controller('Calendar', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.events = res.data[0].events;             
        });
});

这是forked plunker

编辑： The revised plunker，使用上述更改。范围变量应该是res.data.events

在提供新的 json 结构后更新： Here's 一个带有实际 json 数据的工作示例

【讨论】：

我编辑了这个，ng-repeat 可以进行一些修改，所以修改修改后的代码。干杯。
感谢这工作。既然我有 JSON 在本地工作，我想知道，请原谅我在这方面如此陌生，但我将如何解释它以链接到外部 JSON 文件？我试图将链接放在 $Http GET 行中，但它不起作用是否有一个简单的解决方案可以将当前 LOCAL json 链接到 EXTERNAL json？我一直在为类似的东西搜索 StackOverflow，但我得到的只是 $ajax。这是在 Angular 中链接外部 JSON 文件的正确方法吗？
如果获取请求生成的正是这种 json 格式，它应该可以工作，你使用的 url 是什么？另外，请记住，此功能应该在服务中，然后将服务注入控制器。
我正在努力解决这个问题......这是plunker。我还将该 JSON 文件的内容粘贴到那里的 todo.json 文件中。
plunker 因为 CORS 而阻塞它，在本地尝试并 console.log(res) 看看你得到了什么，并最终记录 res.data, res.data[0] 来熟悉如何获得您想要的东西。