Question

我正在努力做标题建议。问题是，我的浏览器没有显示json文件中的任何内容。它应该很直接，但我似乎无法知道出了什么问题。

这是我的app.controller.js

var app = angular.module('myApp', []);
app.controller('appCtrl', function($scope, $http) {
    $http.get('data.json').success(function(data){
        $scope.display = data;
    }); 
});

我有一个单独的html文件

<html ng-app ="myApp">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script type='text/javascript' src="bower_components/angular/angular.js" charset="UTF-8"></script>
        <script type='text/javascript' src="app/app.controller.js" charset="UTF-8"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    </head>
    <body ng-controller="appCtrl">
        <h2> Message Display  </h2>
            <table>
                <tr>
                    <th> Title </th>
                    <th> abstract </th>
                    <th> source </th>
                    <th> publihsed time </th>
                </tr>
                <tr ng-repeat = "item in display">
                    <td> {{item.title}} </td>
                    <td> {{item.abstract}} </td>
                    <td> {{item.source}} </td>
                    <td> {{item.publish_time}} </td>
                </tr>
            </table>

    </body>
</html>

我确保每个文件都在正确的目录中。但不是浏览器只显示标签

json结构

的屏幕截图

我使用$ node server.js运行代码这是server.js的代码

var express = require('express');
var app = express();

app.use(express.static(__dirname));

app.get('/', function(req, res){
  res.redirect('/index.html');
});

app.listen(8080);

Answer 1

首先，您需要重新排序脚本，以便按以下顺序加载。因此，在app controller之后加载了Angular library脚本，这很可能就是问题所在。由于Angular在您尝试使用它来向您json.data发出ajax请求之前未加载。

<script type='text/javascript' src="bower_components/angular/angular.js" charset="UTF-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type='text/javascript' src="app/app.controller.js" charset="UTF-8"></script>

在您的app controller脚本中，您需要为ng-app命名module与myApp = angular.module('myApp', []); myApp.controller('appCtrl', function($scope, $http) { $http({ type:"GET", headers: { "Accept": "application/json;charset=utf-8", "Accept-Charset":"charset=utf-8" }, dataType:"json", url:"data.json", }).then(function success(response){ $scope.display =response.data; }); });变量相同的内容：

ng-repeat

这两项更改应解决您的问题。

<强>可选

您也可以考虑将<tbody>移动到这样的<tbody ng-repeat="data in display"> <tr> <td> {{data.title}} </td> <td> {{data.abstract}} </td> <td> {{data.source}} </td> <td> {{data.publish_time}} </td> </tr> </tbody>元素中：

resultado += m_Clase [i].Suma ();

Answer 2

更改您的代码，如下所示。 here is my working plunker

app.service('dataService',function($http){

  this.getdata = function(){
      return $http.get('data.json');

  };

});

app.controller('MainCtrl', function($scope,dataService) {
  $scope.name = 'World';

  $scope.display =[];

  dataService.getdata()
  .then(function(repsonse){
     $scope.display =repsonse.data;

  });

});

如何使用angularJS在json文件中显示数据？

2 个答案: