angular.js - Angular根据JSON数据动态生成在网页上的列表

【字号: 日期:2023-01-25浏览:23作者:雯心

问题描述

[ { '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,卡在这种数组套对象,对象里面又是对象的模式了。。。好几天了。

谢谢!

问题解答

回答1:

用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='https://www.6hehe.com/wenda/’ + document.location + ’' />’);</script> <link rel='stylesheet' href='https://www.6hehe.com/wenda/style.css' /> <script data-require='angular.js@1.4.x' src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js' data-semver='1.4.6'></script> <script src='https://www.6hehe.com/wenda/app.js'></script> </head> <body ng-controller='MainCtrl'> <p ng-repeat='ele in data'> <p>{{ele.meta.author}}</p> <p>{{ele.meta.title}}</p> <br> </p> </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编码问题'} } ];});

相关文章: