我无法显示图像，它应该显示每个“ gem ”的缩略图和完整图像， Angular 教程不够详细..
这是我的 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 }}" 当我运行文档时在浏览器中
最佳答案
您的 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>关于javascript - Angular JS 图像数组编码麻烦，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33147554/