私はまだAngularJSの新機能ですが、これはJSONドキュメントからのインポートに関係しています。JSONファイルがインポートされていませんか?
私はJSファイルのオブジェクトとしてすべてを作ったギターのリストを持っています(それはすべて正常に動作していました)。そしてそれらを表示するにはng-repeatを使います。今、これらのオブジェクトを別々のJSONファイルに配置したいと思います。
HTMLテンプレート:
<section id="guitarSections" ng-controller="GuitarCtrl">
<div id="guitarDivs" data-ng-repeat="guitar in guitars">
<img id="guitarImages" src="{{guitar.imageURL}}">
<div id="text">
<h2 class="information">{{guitar.title}}</h2>
<p class="information">Instrument: {{guitar.instrument}}<p>
<p class="information">Color: {{guitar.color}}</p>
<p class="information">Price: {{guitar.price}}</p>
</div>
</div>
<br>
</section>
JS
var app = angular.module("myApp", []);
app.controller("GuitarCtrl", function($scope, $http) {
var url = "data.json";
$http.get(url).then(function(response) {
$scope.guitars = response.data;
});
});
そして、私のJSONの小さなサンプル:
{
"guitars":[
{
"title": "Yamaha Revstar 420",
"brand": "Yamaha",
"instrument": "Electric Guitar",
"color": "Red",
"price": "$499.99",
"details": "Yes",
"imageURL": "YamahaRS420.jpg"
},
{
"title": "Yamaha Pacifica Series PAC012",
"brand": "Yamaha",
"instrument": "Electric Guitar",
"color": "Blue",
"price": "$",
"details": "Yes",
"imageURL": "YamahaPacificaSeriesPAC012.jpg"
}
]}
私はPythonのサーバー上でそれを実行するとき(のpython -m SimpleHTTPServer )、ページはロードされますが、コンテンツはインポートされず、1つのギターセクションのみが表示されます。
追加注記:ネットワークの検査も行いましたが、ドキュメントの名前の列には、 '%7B%7Bguitar.imageURL%7D%7D'が赤で表示されていました。これを検討すると、ページがポップアップし、言っている、私に404を与える:
エラーコード404
メッセージ:ファイルが見つかりません。
エラーコードの説明:404 =指定したURIに一致するものはありません。
私はすべての私の文書の名前のスペルが間違っていないことを確認しており、各画像をインポートすることができます。