如何使用Angular Js以从node.js服务器检索的表格式显示json数据

Question

这是我制作的一个索引文件，用于通过angular.js显示json数据

<!DOCTYPE html>
<html>
<head>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
<script src= “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
</head>
<body>

<div ng-app=”” ng-controller=”blogController”>

<table>
<tr><td>Manger Id</td><td>Manger Name</td></tr>
  <tr ng-repeat=”x in name”>
    <td>{{ x.m_id }}</td>

<td>{{ x.name }}</td>


  </tr>
</table>

</div>

<script>
function blogController($scope,$http) {
$http.get('http://localhost:3000/techgeek/v1/getEmployeeDetails')
.success(function(response) {
    $scope.names = response;
    console.log($scope.names);
});
}
</script>

</body>
</html>

我无法从nodejs服务器获取json数据。 我还通过nodejs切断了对我的json数据的保密提示。 。 网址的主要问题。 谢谢您的帮助

Answer 1

这是为您解决的问题。 我已经使用本地Json解决了它。 您犯了以下错误：

1. ng-repeat名称应该在那里，因为您的控制器中有$ scope.names。
2. x.name第二栏为您的JSON是具有x.m_name作为字段这是错误的。
3. 另外，我怀疑node.js服务器和angular应用程序是否在同一端口上运行，否则您可能会在控制台中收到CORS （跨源资源共享）错误，必须对其进行修复。

柱塞

   <tr><td>Manger Id</td><td>Manger Name</td></tr>
   <tr ng-repeat="x in names track by $index">
        <td>{{ x.m_id }}</td>
        <td>{{ x.m_name }}</td>
   </tr>

更新1

您的模块有问题，因为您在代码中使用了ng-app="" ，请使用以下模块进行修复

var app = angular.module('plunker', []);
app.controller("",function(){
 .....................
});