2015-10-15 68 views
1

我不能得到的圖像顯示,它應該顯示每個「寶石」的角度教程不夠詳細縮略圖和完整的圖像..角JS圖像陣列編碼麻煩

我的繼承人HTML代碼:

<!DOCTYPE html> 
<html ng-app="store"> 
<head> 
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/> 
</head> 
<body ng-controller="StoreController as store"> 
<ul class="list-group"> 
    <li class="list-group-item" ng-repeat="product in store.products"> 
    <h3> 
    {{product.name}} 
    <em class="pull-right">{{product.price | currency}}</em> 
    <img ng-src="{{product.images[0].full}}"/> 
    </h3> 
    </li> 
</ul> 
<script type="text/javascript" src="angular.min.js"></script> 
<script type="text/javascript" src="app.js"></script> 
</body> 
</html> 

JS代碼:

(function(){ 
var app = angular.module('store', []); 

app.controller('StoreController', function(){ 
    this.products = gems; 
}); 

var gems = [ 
{ 
    name: "dodecahedron", 
    price: 2.95, 
    description: ". . .", 
    images: [ 
    { 
     full: 'gemfull.gif', 
     thumb: 'gemthumb.gif' 
}, 
{ 
     full: 'gemfull.gif', 
     thumb: 'gemthumb.gif' 

}, 

], 
    name: "Pentagonal Gem", 
    price: 5.95, 
    description: ". . .", 
    images: [ 
    { 
     full: 'gemfull.gif', 
     thumb: 'gemthumb.gif' 

     full: 'gemfull.gif', 
     thumb: 'gemthumb.gif' 

}, 
], 
] 
})(); 

我怎樣才能得到這個工作?

它應該像一個店,但我似乎無法得到JS(或HTML),以適當的工作,而不是我只是得到"{{product.name}} {{product.price | currency}}"在瀏覽器中,當我運行該文件

回答

0

var gems = [變量不適合格式化。

我已修復var gems變量,您的代碼工作正常。 關閉大括號[{不在適當的地方。

檢查以下片斷沒有圖像:

(function(){ 
 
    var app = angular.module('store', []); 
 

 
    var gems = [{ 
 
     name: "dodecahedron", 
 
     price: 2.95, 
 
     description: ". . .", 
 
     images: [ 
 
     { 
 
      full: 'gemfull.gif', 
 
      thumb: 'gemthumb.gif' 
 
     }, 
 
     { 
 
      full: 'gemfull.gif', 
 
      thumb: 'gemthumb.gif' 
 

 
     }, 
 

 
     ]},{ 
 
      name: "Pentagonal Gem", 
 
      price: 5.95, 
 
      description: ". . .", 
 
      images: [ 
 
      { 
 
       full: 'gemfull.gif', 
 
       thumb: 'gemthumb.gif' 
 
      },{ 
 
       full: 'gemfull.gif', 
 
       thumb: 'gemthumb.gif' 
 

 
      }, 
 
      ], 
 
     } 
 
     ]; 
 

 
     app.controller('StoreController', function(){ 
 
      this.products = gems; 
 
     }); 
 

 
    })();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="store"> 
 
<head> 
 
</head> 
 
<body ng-controller="StoreController as store"> 
 
<ul class="list-group"> 
 
    <li class="list-group-item" ng-repeat="product in store.products"> 
 
    <h3> 
 
    {{product.name}} 
 
    <em class="pull-right">{{product.price | currency}}</em> 
 
    <img ng-src="{{product.images[0].full}}"/> 
 
    </h3> 
 
</li> 
 
</ul> 
 
</body> 
 
</html>