Angular根据JSON数据动态生成在网页上的列表
[
{
"meta": {
"author": "test",
"date_create": "2015-10-14T00:00:00",
"date_modify": "2015-10-14T00:00:00",
"filename": "微信页面整合",
"git_username": "kk",
"subdir": "article",
"subtitle": null,
"tags": [
"api",
"微信",
"开发文档"
],
"title": "微信页面整合"
}
},
{
"meta": {
"author": "Waylan LimbergJohn Doe",
"date_create": "2015-10-14T00:00:00",
"date_modify": "2015-10-14T00:00:00",
"filename": "python2编码问题.md",
"git_username": "guyskk",
"subdir": "article",
"subtitle": null,
"tags": [],
"title": "python2编码问题"
}
}
]
json文件格式如上，如何通过angular根据返回的json文件（可能有多个文章数据），动态生成列表。要求能读取到meta和title。。第一次用angular,卡在这种数组套对象，对象里面又是对象的模式了。。。好几天了。
谢谢！
isdyu
9 years, 4 months ago
Answers
用ng-repeat应该很容易做吧
例子(
http://plnkr.co/edit/xsQqAFUiwigPEkbyNtdO)
html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="ele in data">
<p>{{ele.meta.author}}</p>
<p>{{ele.meta.title}}</p>
<br>
</div>
</body>
</html>
js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = [
{
"meta": {
"author": "test",
"date_create": "2015-10-14T00:00:00",
"date_modify": "2015-10-14T00:00:00",
"filename": "微信页面整合",
"git_username": "kk",
"subdir": "article",
"subtitle": null,
"tags": [
"api",
"微信",
"开发文档"
],
"title": "微信页面整合"
}
},
{
"meta": {
"author": "Waylan LimbergJohn Doe",
"date_create": "2015-10-14T00:00:00",
"date_modify": "2015-10-14T00:00:00",
"filename": "python2编码问题.md",
"git_username": "guyskk",
"subdir": "article",
"subtitle": null,
"tags": [],
"title": "python2编码问题"
}
}
];
});
YOUSUCK
answered 9 years, 4 months ago
