最近由于一个契机学习了Ionic这门新技术,之前只过web端的网页,觉得Ionic真的是很方便,很轻量,所以我就开始着手写了一个项目,但是学着学着问题也就随之来了。
根据官方API文档
<div class="row">
<div class="col">
<div>.col</div>
</div>
<div class="col">
<div>.col</div>
</div>
</div>
确实一行分成了两个div,但是要是一行内放很多个div,就会只在一个行内按照等份排列,不会一行两个第三个折行的排列。同时还要遍历数据,所以想出了一个解决办法:
在最外层的div开始遍历,判断传进来数据的下角标是否能整除2,如果整除2以后再显示出$index+1的数据。代码如下:
<div class="row" ng-repeat="product in products">
<div class="col" ng-if="$index%2==0">
<a href="#/tab/productList/{{products[$index]['id']}}">
<img ng-src="{{products[$index]['picture']}}"
style="width: 100%">
</a>
</div>
<div class="col" ng-if="$index%2==0&&$index+1<=products.length">
<a href="#/tab/productList/{{products[$index+1]['id']}}">
<img ng-src="{{products[$index+1]['picture']}}"
style="width: 100%">
</a>
</div>
</div>
【注】
1.$index是angular取下角标的方式
2.{{products[$index][‘picture’] }}这是通过下角标取到数据内部属性的方式,相当于{{products.picture}}
由于是个人的笔记,所以我要自己捋一捋逻辑:)
当id=0的时候,$index%2==0
所以第一个div成立,拼接节点。
第二个div,虽然id=0,但是他是第一个,所以他的长度就是1,就也满足$index+1<=products.length
这个条件,所以也会拼接节点。
由于拼接的是$index+1
的内容{{products[$index+1]['picture']}}
,所以id=1 的内容也显示上了。
当id=1 的时候,除以2不等于0,第一个div不成立,不拼接节点,同时第二个div也不成立不在拼接。
以此类推。