2015-10-15 69 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>