Question

我正在尝试使用angularJS显示表中json文件中的数据，但我得到空白页作为输出。代码如下。我有单独的json文件和单独的js文件，其中我已经定义了角度控制器。当我运行应用程序时，我得到一个空白页作为输出。

查看：

var app = angular.module('angularTable', []);

app.controller('listdata', function ($scope, $http) {

$scope.users = []; //declare an empty array

$http.get("mockJson/mock.json").success(function (response) {

    alert('');
    $scope.users = response; //ajax request to fetch data into $scope.data

    });

});

app.js -

[ { "id": 1, "first_name": "Jhon", "last_name": "show", "hobby": "Eating" },
{ "id": 2, "first_name": "Jhon2", "last_name": "show2", "hobby": "Eating2" },
{ "id": 3, "first_name": "Jhon3", "last_name": "show3", "hobby": "Eating3" },
{ "id": 4, "first_name": "Jhon4", "last_name": "show4", "hobby": "Eating4" },
{ "id": 5, "first_name": "Jhon5", "last_name": "show5", "hobby": "Eatin5" },
{ "id": 6, "first_name": "Jhon6", "last_name": "show6", "hobby": "Eating6" },
{ "id": 7, "first_name": "Jhon7", "last_name": "show7", "hobby": "Eating7" },
{ "id": 8, "first_name": "Jhon8", "last_name": "show8", "hobby": "Eating8" },
{ "id": 9, "first_name": "Jhon9", "last_name": "show9", "hobby": "Eating9" },
{ "id": 10, "first_name": "Jhon10", "last_name": "show10", "hobby": "Eating10" },
{ "id": 11, "first_name": "Jhon11", "last_name": "show11", "hobby": "Eating11" },
{ "id": 12, "first_name": "Jhon12", "last_name": "show12", "hobby": "Eating12" },
{ "id": 13, "first_name": "Jhon13", "last_name": "show13", "hobby": "Eating13" },
{ "id": 14, "first_name": "Jhon14", "last_name": "show14", "hobby": "Eating14" },
{ "id": 15, "first_name": "Jhon15", "last_name": "show15", "hobby": "Eating15" },
{ "id": 16, "first_name": "Jhon16", "last_name": "show16", "hobby": "Eating16" },
{ "id": 17, "first_name": "Jhon17", "last_name": "show17", "hobby": "Eating17" },
{ "id": 18, "first_name": "Jhon18", "last_name": "show18", "hobby": "Eating18" },
{ "id": 19, "first_name": "Jhon19", "last_name": "show19", "hobby": "Eating19" },
{ "id": 20, "first_name": "Jhon20", "last_name": "show20", "hobby": "Eating20" },
{ "id": 21, "first_name": "Jhon21", "last_name": "show21", "hobby": "Eating21" },
{ "id": 22, "first_name": "Jhon22", "last_name": "show22", "hobby": "Eating22" },
{ "id": 23, "first_name": "Jhon23", "last_name": "show23", "hobby": "Eating23" },
{ "id": 24, "first_name": "Jhon24", "last_name": "show24", "hobby": "Eating24" },
{ "id": 25, "first_name": "Jhon25", "last_name": "show25", "hobby": "Eating25" }]

mock.json： -

Answer 1

我没有看到您的代码有任何问题，但稍微修改了在body上定义ng-app而不是html标记。

以下是相同

的工作plunker

<body>
<div role="main" class="container theme-showcase" ng-app="angularTable">
    <div class="" style="margin-top:90px">
        <div class="col-lg-8">
            <div class="page-header">
                <h2 id="tables">Searching,Sorting and Pagination in angularJS.</h2>
            </div>
            <div class="bs-component" ng-controller="listdata">
                <table class="table-striped table-hover">
                    <thead>
                        <tr>
                            <th>Id</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Hobby</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="user in users">
                            <td>{{user.id}}</td>
                            <td>{{user.first_name}}</td>
                            <td>{{user.last_name}}</td>
                            <td>{{user.hobby}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</body>

修改您的HTML <head>代码，如下所示

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="angularTable">
<head>
<title></title>
<link href="content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/app.js"></script>
</head>

来自OP的评论问题是使用$http.get方法使用.success函数，该函数在1.6版本中不再使用。

OP可以回退到＆lt; 1.6版本或使用.then函数进行成功回调

以下是更新后的plunker

当使用.then函数时，它具有与响应相关的所有对象，因此对于数据检索我们应该使用response.data

Answer 2

我认为问题在于角度版本。 $ http.get（...）。成功在角1.6中删除

尝试使用以下内容，它使用新语法

var app = angular.module('angularTable',[]);

app.controller('listdata',function($scope,$http){

   $scope.users = [];

   $http.get("demo.json").then(function(response){
    $scope.users = response.data;
   });

});

在html页面中使用angularJS显示json数据

2 个答案: