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

从网络请求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. Hibernate问题集锦: 概述

    Hibernate问题集锦: 概述   ImportNew注: 本文是ImportNew编译整理的Java面试题系列文章之一.你可以从这里查看全部的Java面试系列. Q.怎么配置hibernate? ...

  2. 让Eclipse的TomcatPlugin支持Tomcat 8.x

     使用tomcat插件启动项目的优势: 1.TomcatPlugin是一个免重启的开发插件,原始的Servers方式启动tomcat项目,修改xxx.ftl  或者 xxx.jsp 文件后需要重启to ...

  3. ubuntu为什么没有/etc/inittab文件? 深究ubuntu的启动流程分析

    Linux 内核启动 init ,init进程ID是1,是所有进程的父进程,所有进程由它控制. Ubuntu 的启动由upstart控制,自9.10后不再使用/etc/event.d目录的配置文件,改 ...

  4. shutil模块,ZipFile 和 TarFile 两个模块

    高级的文件.文件夹.压缩包处理模块 shutil.copyfileobj(fsrc, fdst[, length])将文件内容拷贝到另一个文件中,可以部分内容 shutil.copyfile(src, ...

  5. 融云rongCloud聊天室的使用

    融云提供了两种途径的接口, 一个是app端,一个是服务器端的. app端 1.连接融云,监听消息 rong = api.require('rongCloud2'); rong.init(functio ...

  6. Linux学习笔记 -- 硬链接与软连接(转)

    原文地址: http://www.cnblogs.com/itech/archive/2009/04/10/1433052.html Linux链接概念 Linux链接分两种,一种被称为硬链接(Har ...

  7. (转)Docker - 使用 compose 编排服务

    在园子里看到了这篇关于 compose 的文章,非常好!!转过来,先附上原文地址 http://www.cnblogs.com/52fhy/p/5991344.html ----- 入门示例 一般步骤 ...

  8. SDRAM 之时序收敛(学习了特权老师)

    到现在我还是不太理解SDRAM的时序设置,但是可能蒙对了.(呵呵) 开发环境: quartus II 13.0   板子: DE2 EP2C35F672C6N 时序约束step 1:create cl ...

  9. left join的多重串联与groupby

    有三张表或组合查询,f1,f2,f3,其中,f1分别与f2,f3是一对多关系,f1一条记录可能对应f2或f3中0条或多条记录 要创建一个查询,以f1为基准,即f1中有多少条记录,结果也就返回对应数量的 ...

  10. 第一章 初识MySQL(待续)

    ···········