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

从网络请求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在加载时,数组还没值 ,
所以图片不会显示。因为网络请求是异步的,当异步请求结束后数组有值了,标签里的内容才会执行。

HTML__图片轮播ion-slide-box的更多相关文章

  1. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  2. Unslider Web前端框架之图片轮播

    前端框架,前端组件,前端库,都是一个意思,能看源码. 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动.一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设 ...

  3. jquery 图片轮播demo实现

    转载注明出处!!! 转载注明出处!!! 转载注明出处!!! 图片轮播demo,弄清楚过程其实是一个很简单的东西,看网上都没有什么实质性的代码,就自己把过程捋了一遍实现了. 这次因为随手写的,所以没有做 ...

  4. 图片轮播(bootstrap)与 圆角搜索框(纯css)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  6. 使用js制作一般网站首页图片轮播效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  8. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  9. 基于bootstrap的图片轮播效果展示

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

随机推荐

  1. unidac使用演示

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  2. mysql实战优化之四:mysql索引优化

    0. 使用SQL提示 用户可以使用use index.ignore index.force index等SQL提示来进行选择SQL的执行计划. 1.支持多种过滤条件 2.避免多个范围条件 应尽量避免在 ...

  3. FTP,FTPS,FTPS与防火墙

    昨天搭建了一台FTPS服务器,过程中学习了很多不清楚的知识点,还有遇到的问题,记录一下. (大部分内容汇集.整理自网络) 一. 关于FTP传输模式 众所周知,FTP传输有两种工作模式,Active M ...

  4. ThreadPoolExecutor之四:jdk实现的ScheduledThreadPoolExecutor

    一.定时任务调度方式常见的有: 1.cron是一个linux下的定时执行工具,一些重要的任务的定时执行可以通过cron来实现,例如每天凌晨1点备份数据等. 2.在JAVA WEB开发中,我们也经常需要 ...

  5. 实战MvcPager(PagerOptions自定义样式&同、异步)

    ASP.NET MVC下的分页控件MvcPager用起来简直太嗨呸了,两句代码实现一个分页,而且需要改变样式的时候直接构造PagerOptions类 实战无需多说,拿来用之即可.个人觉得对性能影响不大 ...

  6. Android 4学习(8):用户界面 - Fragment

    参考<Professional Android 4 Development> Fragment简介 Fragment是我们可以将Activity分成不同的组成部分,这些组成部分拥有自己的生 ...

  7. Spring Cloud Zuul 2(基于配置中心的动态API网关)

    在大体了解了API Zuul 和 配置中心Config后我们来尝试完成一个基于配置中心的动态API网关 创建项目 命名为api-gateway-dynamic-route并加入config 和 Zuu ...

  8. System.Security.Cryptography.CryptographicException: 出现了内部错误。

    引用:http://www.cnblogs.com/ithome8/p/5189926.html 我总结了一下出现证书无法加载的原因有以下三个 1.证书密码不正确,微信证书密码就是商户号 解决办法:请 ...

  9. Timer的缺陷

  10. Java虚拟机(三):垃圾收集器

    一.串行(Serial)收集器 最古老,最稳定 效率高 可能会产生较长的停顿 -XX:+UseSerialGC 新生代.老年代使用串行回收 新生代复制算法 老年代标记-压缩 二.并行收集器 1. Pa ...