Question

这是我的网络服务中的json数据

[{"cameraid":"ggh","timestamp":"2016/05/10 01:31","filename":"ffffpg"},
{"cameraid":"mason","timestamp":"2016/05/10 05:31","filename":"aaa.png"}

我的html文件

<!doctype html>
<html ng-app="camListApp">
<head>
    <title>hi AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script>
    var camListApp = angular.module('camListApp');
    camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
    function Hello($scope, $http) {
        $http.get('http://localhost/camera/list').
            success(function(data) {
                $scope.record= data;
            });
    }
    </script>
</head>
<body>
    <div ng-controller="Hello">
        <table border = 1>
        <thead>
        <tr>
        <th>camid</th>
        <th>Timestamp</th>
        <th>Filename</th>

        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="record in record">
        <td>{{record.cameraid}}</td>
        <td>{{record.timestamp}}</td>
        <td>{{record.filename}}</td>
        </tr>
        </tbody>
        </table>
    </div>
</body>
</html>

当我运行浏览器时，表中没有显示任何数据。我错过了什么或做错了什么？有人可以帮忙吗？因为我想显示表格中的所有数据

Answer 1

您的代码中存在以下问题，一旦修复将使您的代码正常工作：

从模块定义中缺少[]。将其更改如下：

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

控制器定义不正确，因为您有2个回调函数（其中一个）。你只需要一个：

camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
  $http.get('http://localhost/camera/list').
    success(function(data) {
        $scope.record= data;
    });
}]);

handlin promises的首选方法是使用.then代替.success

当您使用$http服务时，它会将您的数据包装在一个对象中，而实际数据是在回调中返回的响应中公开的属性。访问data属性作为响应，如下所示：
```
$http.get('https://api.github.com/users/addi90/repos').then(function(response) {
  $scope.records= response.data;
});
```

我创建了一个包含来自我的github repos的样本数据的工作箱：https://jsbin.com/qejapayuhi/1/edit?html,js,console,output

Answer 2

在HTML中，您需要为应用命名：

<html ng-app="camListApp">

然后在您的脚本中，您需要定义控制器和应用程序，并引入服务。在函数周围添加：

var camListApp = angular.module('camListApp');
camListApp.controller('Hello', ['$scope', '$http', function($scope, $http){
   // existing code
}

Angular对这些事情非常挑剔。由于我无法轻松复制您的应用，因此我很有兴趣了解这是否适用于您。

使用AngularJS消耗Rest Web服务

2 个答案: