HTML__图片轮播ion-slide-box

先大概描述一下要做的界面:

从网络请求json数据,获取网络图征数据,然后轮播图片。我遇到的问题是:图片不显示,代码如下
<ion-slide-box does-continue="true" show-pager="true" auto-play="true" slide-interval="1000">
<ion-slide ng-repeat="item in homePage" >
<div class="imgLoop">
<img src="{{item.imgUrl}}" class="imgScroll"/>
</div>
</ion-slide>
</ion-slide-box>
解决办法:

<ion-slide-box does-continue="true" show-pager="true" auto-play="true" slide-interval="1000" ng-if="homePage.length>0">
<ion-slide ng-repeat="item in homePage" >
<div class="imgLoop">
<img src="{{item.imgUrl}}" class="imgScroll"/>
</div>
</ion-slide>
</ion-slide-box>

总结:主要就是加了一个判断条件 ng-if="homePage.length>0" ,大概意思就是:当数组homePage有值时,执行下标签里的内容。  如果不加ng-if  那么HTML在加载时,数组还没值 ,
所以图片不会显示。因为网络请求是异步的,当异步请求结束后数组有值了,标签里的内容才会执行。
posted on 2016-07-23 20:51  疯狂的小馒头  阅读(505)  评论(0编辑  收藏  举报