cari

Rumah  >  Soal Jawab  >  teks badan

angular.js - Angular menjana senarai secara dinamik pada halaman web berdasarkan data 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编码问题"
    }
  }
]

Format fail json adalah seperti di atas Cara menjana senarai secara dinamik berdasarkan fail json yang dikembalikan (yang mungkin mempunyai data berbilang artikel) melalui sudut. Ia dikehendaki boleh membaca meta dan tajuk. . Kali pertama saya menggunakan Angular, saya terperangkap dalam jenis objek bersarang tatasusunan ini, dan objek berada dalam mod objek. . . Sudah beberapa hari.

Terima kasih!

曾经蜡笔没有小新曾经蜡笔没有小新2758 hari yang lalu699

membalas semua(1)saya akan balas

  • 给我你的怀抱

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

    Sepatutnya mudah untuk melakukannya dengan ng-repeat
    Contoh (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编码问题"
        }
      }
    ];
});

    balas
    0
  • Batalbalas