JSON数据没有得到显示
我是Angular JS的新手，正在尝试使用JSON数据调用Rest API。 但是当我运行我的HTTP服务器时，没有任何显示。 当我在控制台中放下响应时，我正在接收响应。
Htmlcode：
<html ng-app="myapp"> <head> <div ng-controller="header"> <h1><center>{{apptitle}}</center></h1> </div> <div ng-controller="contactinfo"> <table class="table"> <thead> <tr> <th>Sl.No</th> <th>Name</th> <th>Address</th> <th>Phno</th> </tr> </thead> <tbody ng-repeat="info in contact"> <tr> <th scope="row">1</th> <td>{{ info.name }}</td> <td>{{ info.location }}</td> <td>{{ info.phone }}</td> </tr> <tr> <th scope="row">2</th> <td>{{ info.name }}</td> <td>{{ info.location }}</td> <td>{{ info.phone }}</td> </tr> </tr> </tbody> </table> </div> angular码：
var app = angular.module('myapp',[]); app.controller('header',function($scope){ $scope.apptitle = "Basic contacts App" }); app.controller('contactinfo',function($scope,$http){ $http.get('http://localhost:3000/contactinfo') .then(function(response){ console.log(response); $scope.contact = response.data.contactinfo; }); });
预计响应数据：
{ "contactinfo" : [ { "name" : "Jeremy Franke", "location":"madrid , Unitedkingdom", "phone" : 9874563210 }, { "name" : "Jade Raymond", "location":"portland , Netherland", "phone" : 9874563210 }, { "name" : "Franklin", "location":"texas , UnitedStates", "phone" : 9874563210 } ]
}
请仔细比较你的解决scheme与这个演示小提琴 。 你的方法很好，所以应该有其他问题。 也许你将能够重现你的问题，同时比较你的解决scheme和这个可运行的代码。
视图
<!DOCTYPE html> <html ng-app="myapp"> <head> <title>Demo</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.angularjs.org/1.4.7/angular.js" type="text/javascript"></script> <script src="script.js"></script> </head> <body> <div ng-controller="header"> <h1><center>{{apptitle}}</center></h1> </div> <div ng-controller="contactinfo">- <table class="table"> <thead> <tr> <th>Sl.No</th> <th>Name</th> <th>Address</th> <th>Phno</th> </tr> </thead> <tbody ng-repeat="info in contact"> <tr ng-repeat="info in contact"> <th scope="row">3</th> <td>{{ info.name }}</td> <td>{{ info.location }}</td> <td>{{ info.phone }}</td> </tr> </tbody> </table> </div> </body> </html>
AngularJS应用程序
var app = angular.module('myapp', []); app.controller('header', function($scope) { $scope.apptitle = "Basic contacts App" }); app.controller('contactinfo', function($scope, $http) { $http.get('./data.json') .then(function(response) { console.log(response); $scope.contact = response.data.contactinfo; }); });