有关于 Angular根据JSON数据动态生成在网页上的列表 问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

有关于 Angular根据JSON数据动态生成在网页上的列表 问题

2016-03-05 09:07:05 2025 1
[
  {
    "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)
  • 爵霸
    2019-07-17 18:52:53

    用ng-repeat应该很容易做吧

    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>

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

0

回答

Spring MVC中,如何定义一个REST API返回Order订单的JSON数据的呀?

2021-11-09 20:44:50 218浏览量 回答数 0

1

回答

Spring MVC中,应该怎么定义一个REST API返回Order订单的JSON数据?

2021-11-02 20:55:41 355浏览量 回答数 1

1

回答

json数据值读取时 提示typeerror错误?报错

2020-06-09 10:54:03 288浏览量 回答数 1

1

回答

Jersey 返回json数据中日期格式 400 请求报错 

2020-05-30 21:08:37 384浏览量 回答数 1

1

回答

前台怎么返回json数据

2018-05-10 19:59:54 1234浏览量 回答数 1

1

回答

json格式数据怎么解析

2018-05-10 19:58:37 1235浏览量 回答数 1

1

回答

json数据怎么转成对象

2018-05-10 20:00:08 1369浏览量 回答数 1

1

回答

JSON数据传输后台拿不到,求大神指点

2016-07-06 19:37:38 1816浏览量 回答数 1

1

回答

json从后台读取数据大小写的问题

2016-07-05 09:05:12 1913浏览量 回答数 1

1

回答

map<String,Model>转成json数据后要怎么解析?

2016-03-20 11:19:30 2741浏览量 回答数 1
+关注
2
文章
9426
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载