ng-repeat Angular and JSON array

我是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;                
        });
});

杰森：

[
    {
        "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 ..."
            }
        ]
    }
]

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

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

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

<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;             
        });
});

这是一个分叉的 plunker

编辑：修改后的 plunker，使用上述更改。范围变量应res.data.events

在提供新的 json 结构后更新：下面是一个包含实际 json 数据的工作示例

相关内容

最新更新

热门标签：