Angular JS图像数组编码麻烦

Angular JS image array coding trouble

本文关键字：编码 麻烦 数组 图像 JS Angular      更新时间：2023-09-26

我无法显示图像，它应该显示每个"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>

相关文章：