Question

ionic 的 ion-slide-box 加了ng-repeat。有问题。图片显示不出来。该怎么

ionic 的 ion-slide-box 加了ng-repeat。有问题。图片显示不出来。该怎么解决？

Answer 1

看下面的例子吧!

在Ionic 默认的tabs类型的空白项目中：

新建模板templates/tab-gallery.html

        <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true"> 
            <ion-slide ng-repeat="item in items">
                <div class="box" >
                <p style="margin:0 auto;text-align:center;">
                <img ng-src="{{item.src}}" style="max-width:100%;"/>
                </p>
                    <ul class="list">
                        <li class="item item-icon-left">
                        <i class="icon ion-information-circled"></i> {{item.label}}
                        </li>
                        <li class="item item-icon-left">
                        <i class="icon ion-navigate"></i> {{item.location}}
                        </li>
                    </ul>
                </div>  
            </ion-slide>
        </ion-slide-box>

app.js中的路由设定：

    .state('tab.gallery', {
      url: "/gallery",
      views: {
        'tab-gallery' :{
          templateUrl: "templates/tab-gallery.html",
          controller: 'GalleryCtrl'
        }
      }
    })

controllers.js中的控制器：

// Gallery Controller
.controller('GalleryCtrl', function($scope, GalleryData) {

    $scope.items = GalleryData.items;

})

services.js中的GalleryData服务：

// Gallery Data: Gallery configuration
.factory('GalleryData', function(){
    var data = {};
    
    data.items = [
        { 
            label: '标签1',
            src: 'img/gallery-1.jpg',
            location: '地点1'
        },
        { 
            label: '标签2',
            src: 'img/gallery-2.jpg',
            location: '地点2'
        },
        { 
            label: '标签3',
            src: 'img/gallery-3.jpg',
            location: '地点3'
        }
    ]; 
    
    return data;
})

演示截图：

很明显，上述代码是工作的，并且可以自动播放，如果你的ng-repeat没有生效，建议你对照检查下，是哪里出问题了。

祝愉快！