Ionic解决遍历数据排版不折行问题

最近由于一个契机学习了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也不成立不在拼接。

以此类推。