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

发布于 2022-09-01 19:05:02 字数 845 浏览 22 评论 0

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

谢谢！

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

舞袖。长 2022-09-08 19:05:02

用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="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="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>

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编码问题"
        }
      }
    ];
});

回复收藏 0

~没有更多了~