Collection-repeat breaking list


#1

I have a list of cards which works perfect with ng-repeat, but when I substitute ng-repeat with collection-repeat, it breaks and instead of showing each item in the list it shows none. In the scope, cards is initialized properly, but for card in cards, when I check if it’s finding each card by doing {{card}} there’s nothing there. I am fairly new to ionic, so I’m not quite sure where to begin debugging it. Any ideas on what’s going on here?

<ion-content>
 <ion-list>
    <ion-item
      collection-repeat="card in cards"
      collection-item-width="'100%'"
      collection-item-height="120"
      ng-href=""
      href = "">
        <div ng-style="{'background-image':'url({{card.card.images[0]}})'}" ng-      click="openDetail(card)" style="cursor:pointer;" ></div>
  
      <h4 class="likes-title" ng-click="openDetail(card)" style="cursor:pointer;">{{card.title}}</h4>
  
      <div class="actions">
       <button ng-click="buy(card)" class="button button-balanced"><i class="icon ion-ios7-cart"></i> Buy</button>
        <button class="button button-assertive" ng-click="removeCard(card)"><i class="icon ion-trash-a"></i> Remove</button>
     </div>

    </ion-item>
  </ion-list>
  <ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
icon="ion-loading-c"
on-infinite="loadMore()"
distance="5%">
  </ion-infinite-scroll>
</ion-content>

#2

Before checking the code… what version of Ionic are you using? I had problems in earlier versions. I recommend you to update to 13beta…


#3

I’m running a nightly I took this week and while it doesn’t break, you lose the gaps between cards in a list when using collection-repeat: http://puu.sh/gIhiq/2207852a1d.png


#4

I’m also having the issue where there is no gap in between the list


#5

I think this may have to do with the item-avatar class


#6

@loomtronic Did you find any solution for this no-gap problem? I am experiencing this as well with version1.0


#7

No, I just went back to my old list