search

Home  >  Q&A  >  body text

angular.js - Angular dynamically generates lists on web pages based on JSON 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编码问题"
    }
  }
]

The json file format is as above. How to dynamically generate a list based on the returned json file (which may have multiple article data) through angular. It is required to be able to read meta and title. . The first time I used Angular, I got stuck in this kind of array nesting objects, and the objects were in object mode. . . It's been several days.

Thank you!

曾经蜡笔没有小新曾经蜡笔没有小新2756 days ago697

reply all(1)I'll reply

  • 给我你的怀抱

    给我你的怀抱2017-05-15 16:58:22

    It should be easy to do with ng-repeat
    Example (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">
        <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编码问题"
            }
          }
        ];
    });

    reply
    0
  • Cancelreply