AngularJS - すべて - 優秀な図書館

でHTTPリクエストをフェッチ/発射されない私は角に新しいですし、下記のHTTP URLを、ディスプレイからデータを取得する必要があり、単純なコードです：AngularJS - すべて

<!DOCTYPE html> 
<html> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<body> 

    <div ng-app="myApp" ng-controller="galaxyCtrlA"> 
    <p>The $http service requests responses from the the server on the "Zone of Avoidance" galaxies, and the response are set as the values of the "message" and "pictures" variables.</p> 
    <p>Welcome message from the "Zone of Avoidance" galaxies is:</p> 
     <h1>{{ message }}</h1> 

    <p>The pictures from the "Zone of Avoidance" are:</p> 
    <ul> 
     <br/> 
     <li ng-repeat="p in pictures"> 
     <img src="{{ p.image }}" alt="{{ p.image }}" width="60%" /> 
     </li> 
    </ul> 
    </div> 

    <script> 
    var app = angular.module('myApp', []); 

    app.controller('galaxyCtrlA', function($scope, $http) { 
    $http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/welcome.html") 
    .then(function(response) { 
     $scope.message = response.data; 
    }); 

    $http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/picture-list.json") 
    .success(function(response) { 
     $scope.pictures = response.image; 
    }); 
    }); 

    </script> 

</body> 
</html>

上記の出力はかなりあるべきシンプルですが、空白のページが表示されます。エラーはまったくありません。間違った

出典

2016-09-11 user1411837

これはあなたが使っているドメインですか？また、ファイルを見ると、 'response.image'のように見えます。 – casraf

これは私が使っているドメインではありません。その別のドメイン。 – user1411837

これを重複としてマークする前に、私が何を求めているのか、あまりにもスマートに行動しようとするのではなく、出力が同じであるかを理解してください。 @Pankaj Parkar – user1411837

問題が起こっている

親切にアドバイスは、2番目の要求です。それがあるべきである：エンドポイントは.imageプロパティを持つオブジェクトを返す、その代わりに、そのプロパティを持つオブジェクトの配列それぞれでないこと

$http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/picture-list.json") 
    .success(function(response) { 
     $scope.pictures = response; 
    });

出典

2016-09-11 11:30:00 Zakaria

ありがとう – user1411837

。

[{イメージ： "/AngularJS/files/httpRequest/Stills_Cam-4_Frame-1300_adjusted.jpg"}、{ 画像： "/AngularJS/files/httpRequest/14-scientistsdi.jpg"}]

代わりに$scopeオブジェクトをresponse.dataオブジェクトプロパティに割り当ててみてください。また.successは、それは私のテストでJSONを解析されていない.then

$http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/picture-list.json") 
    .then(function(response) { 
     $scope.pictures = response.data; 
    });

出典

2016-09-11 12:10:34 scniro

の非推奨されていることに注意してください。これは機能しますか？ここ

$http.get("picture-list.json").success(function(response) { 

    var data = JSON.parse(response); 
    $scope.pictures = data.image; 
});

iが知っているJSON文字列が動作される。 "{\" 画像\ "：[{\" 画像\ "：\" url.jpgの\ "}]}"

出典

2016-09-11 12:12:53

-1

あなたは負荷をhtmlのように、あなたは

は、私は$タイムアウトを使用してコードをやっている

あなたは負荷が含まれている前に、あなたが待機応答のための$約束と$ qまたは使用$タイムアウトを使用することができ、そこからデータを取得するAPIとその撮影時間を呼び出している

var app = angular.module('myApp', []); 
app.controller('galaxyCtrlA', function($scope, $http,$timeout) { 
    $timeout(function(){ 
$http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/welcome.html") 
.then(function(response) { 
    $scope.message = response.data; 
}); 

$http.get("http://www.bogotobogo.com/AngularJS/files/httpRequest/picture-list.json") 
.success(function(response) { 
    $scope.pictures = response.image; 
}); 
}, 3000); 
});

3000の代わりにあなたの時間を置いて、laodに持っていくapiです

出典

2016-09-11 13:19:50 Nitin

AngularJS - すべて

答えて

関連する問題