Question

知道我在这里做错了吗？它必须是简单的东西，但我已经尝试了几个小时的不同组合。

提前致谢。

https://plnkr.co/edit/3NkmhLVLTZe3aMoiK9Ff?p=preview

app.js

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

app.controller('fishHouseMonitorController', function($scope, $http) {
  $http.get("http://www.eastcentralmdaa.org/fishhousemonitor/api/v1/sensormeasurements")
    .then(function(response) {
      $scope.sensormeasurements = response.data;
      // do some error checking to ensure there is an element 0?
      $scope.selectedElement = $scope.sensormeasurements[0];
    });
});

的index.html

<!DOCTYPE html>
    <html ng-app="fishHouseMonitorApp">
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
            <script src="app.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        </head>
        <body>
            <div class="container" ng-controller="fishHouseMonitorController">
                <div class="row">
                    <ul class="list-group">
                        <li class="list-group-item" ng-repeat="sensormeasurement in sensormeasurements" ng-click="selectContact($index)">
                            <span>{{ sensormeasurement.sensorMeasurementDateTime }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </body>
    </html>

这有效：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
    {{ myData }}
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      $http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
        $scope.myData = response.data;
      });
    });
  </script>
</body>
</html>

这不是：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
  <div ng-app="myApp" ng-controller="customersCtrl">
    {{ myData }}
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      $http.get("http://www.eastcentralmdaa.org/fishhousemonitor/api/v1/sensormeasurements").then(function(response) {
        $scope.myData = response.data;
      });
    });
  </script>
</body>
</html>

即使https://jsonlint.com/将http://www.eastcentralmdaa.org/fishhousemonitor/api/v1/sensormeasurements验证为有效的JSON

Answer 1

在HTTPS上运行应用程序时，无法访问HTTP目标。将你的协议更改为HTTPS，你会没事的：

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
    $scope.myData = response.data;
  });
});
</script>

Answer 2

我没有完全理解这个问题。我希望这有帮助

<强> app.js

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

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

   $http.get("http://www.eastcentralmdaa.org/fishhousemonitor
/api/v1/sensormeasurements")
     .then(function(response) {
      $scope.sensormeasurements = response.data[0];
      // do some error checking to ensure there is an element 0?

    });
 });

<强>的index.html

 <ul class="list-group">
   <li class="list-group-item" ng-model="sensormeasurements" ng-click="selectContact($index)">
      <span>{{ sensormeasurement.sensorMeasurementDateTime }}</span>
   </li>
 </ul>

AngularJS不从$ http rest请求返回数据

2 个答案: