Angular JS图像数组编码麻烦答案

【问题标题】：Angular JS image array coding troubleAngular JS图像数组编码麻烦
【发布时间】：2015-10-15 11:38:09
【问题描述】：

我无法显示图像，它应该为每个“宝石”显示缩略图和完整图像，角度教程不够详细..

这是我的 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}}"

【问题讨论】：

标签： javascript html arrays angularjs

【解决方案1】：

您的 var gems = [ 变量格式不正确。

我已修复 var gems 变量，您的代码运行良好。 右大括号 [、{ 不在适当的位置。

检查下面没有图片的sn-p：

(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>

【讨论】：