2017-11-23 15 views
1

私はここで間違っていると思いますか? これは単純なものでなければなりませんが、数時間にわたってさまざまな組み合わせを試しています。

ありがとうございます。

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

+0

デバッガーをチェックしましたか?ネットワークタブにエラーがありますか? HTTPSでアプリケーションを実行しているときにHTTP宛先にアクセスすることはできません。 – lin

+0

入力のおかげで@MikaS私は角に新しいです...あなたはcatch()の使用方法の例(上のコードで)を表示できますか? – merkman

+1

HTTP対HTTPSが@linの問題になる可能性があります。そこには、HTTPではなく、HTTPで実行するプランナーを得る方法がありますか? – merkman

答えて

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> 
0

を検証していても、私は完全にproblem.Iが、これは

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> 
関連する問題