Question

我正在使用Ionic Framework 1＆amp; A构建移动应用程序。 AngularJS

我有REST服务返回JSON数据。数据是相册，其由相册中的名称和图像阵列组成。我想使用嵌套的ng-repeat在视图中显示相册及其照片。

我的系统信息：

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 1.2.4
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Distributor ID: LinuxMint Description:  Linux Mint 17.1 Rebecca 
Node Version: v0.12.2

查看

<!-- ng-repeat photo albums -->
    <div ng-repeat="album in albums" id="event-images">
        <div class="item item-divider">
            <i class="ion-images"></i>
            {{ album.albumName }}
        </div>

        <a class="item item-list-detail">
            <ion-scroll direction="x">
              <img ng-repeat="image in album.images" ng-src="{{image.img-id}}" ng-click="showImages($index)" class="image-list-thumb">
            </ion-scroll>
        </a>
    </div>

JSON

[

{
    "albumName": "Business School 2016",

    "images": [{
            "img-id": 1,
            "img-src": "http://www.freedigitalphotos.net/images/img/homepage/87357.jpg"
        },

        {
            "img-id": 2,
            "img-src": "http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg"
        },

        {
            "img-id": 3,
            "img-src": "http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg"
        },

        {
            "img-id": 4,
            "img-src": "http://i.dailymail.co.uk/i/pix/2014/12/19/2429637D00000578-0-image-a-284_1419003100839.jpg"
        }
    ]
},

{
    "albumName": "Summer School 2016",

    "images": [{
            "img-id": 1,
            "img-src": "http://nehandaradio.com/wp-content/uploads/2016/07/Evan-Mawarire-outside-Harare-Magistrates-Court.jpg"
        },

        {
            "img-id": 2,
            "img-src": "http://resources0.news.com.au/images/2015/03/31/1227286/010588-3399e81e-d282-11e4-a5b4-b2d65ac8975a.jpg"
        },

        {
            "img-id": 3,
            "img-src": "http://nehandaradio.com/wp-content/uploads/2016/07/riot-police-at-mawarire-court-hearing.jpg"
        },

        {
            "img-id": 4,
            "img-src": "http://placehold.it/300x300"
        }
    ]
}

运行后的结果

So ng-repeat is correctly iterating over the 2 albums & 4 images in each but the images are not displaying, upon inspecting elements, ng-src="0"

所以ng-repeat正在迭代2张专辑＆amp;在检查元素时，每个图像中只有4个图像但图像没有显示，ng-src =＆＃34; 0＆＃34;。发生了什么＆amp;我该如何解决这个问题？

Answer 1

我认为ng-src="{{image['img-src']}}"标记中的ng-src="{{image.img-id}}"不是img。

您传递了错误的属性，并且由于属性名称中的连字符，您还需要使用括号表示法。

ng-src无法正常工作

1 个答案: