Question

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

继承我的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 CODE：

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

Answer 1

您的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>

Angular JS图像阵列编码麻烦

1 个答案: