Ionic, 반복되는 데이터 배열 문제 해결

최근에 Ionic이라는 신기술을 배울 수 있는 계기가 생겼습니다. 그 전에 웹 페이지만 봤는데 Ionic가 정말 편리하고 가볍다고 생각해서 저는 손으로 프로젝트를 쓰기 시작했습니다. 그런데 배우면서 문제가 생겼습니다.공식 API 설명서에 따라

   <div class="row">
    <div class="col">
      <div>.coldiv>
    div>
    <div class="col">
      <div>.coldiv>
    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도 성립되지 않고 연결하지 않는다.
이런 식으로 유추하다.