ng-repeat Angular和JSON数组 [英] ng-repeat Angular and JSON array
问题描述
我是Angular的新手，我试图建立一个简单的显示器.我浏览了有关ng-repeat的文档，每次都成功完成了一些教程.但是，当我自己做一个模拟游戏时，我无法从JSON文件中显示任何内容.即使使用随处可见的Angular"todo.json"示例，我仍然无法弄清楚这一点.我不确定它是否必须使用JSON或可能嵌套ng-repeat.谁能引导我看到光?！呵呵.预先感谢.
I'm new to Angular and I'm trying to set up a simple display. I've looked through the documentation on ng-repeat and have done some of the tutorials with success every time. However, when I went to do a mock of my own I can't get anything to show from the JSON file. Even using the often found Angular "todo.json" example found everywhere I still am unable to figure this one out. I'm not sure if it has to do something with JSON or possibly nesting the ng-repeat. Can anyone guide me to seeing the light?! hehe. Thanks in advance.
因此，这是Plunker链接. http://plnkr.co/edit/8rNgPHUHEe88Gpw6aM1D
So, here's the Plunker link. 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 ..."
}
]
}
]
推荐答案
如果必须保留此结构，则需要执行类似的操作
If you must keep this structure, then you need to do something like this
<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;
});
});
这是一个分叉的矮人
使用上述更改，修改后的矮人.范围var应该为res.data.events
The revised plunker, using the above changes. The scope var should be res.data.events
在提供新的json结构之后进行更新: 这是包含实际json数据的有效示例
Updating after a new json structure provided: Here's a working example with actual json data
这篇关于ng-repeat Angular和JSON数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
