Collection Repeat + Cards

ionic-v1
1

How do I user collection repeat and keep the card appearance?

1 Like
2

Maybe this can help

 <ion-list>
   <ion-item class="item-div&quot;" ng-repeat="object in objects" href="">
		< here your card>
   </ion-item>
 </ion-list>

Also you can use this http://ionicframework.com/docs/components/#card-lists

3

I done it with ng-repeat, but the scroll isn’t smooth…
Im trying to apply the new collectionRepeat, but it breaks the card appearance :confused:

4

You can put some code ?

5 
<div class="card">
	<div collection-repeat="item in items"
    	collection-item-height="150"
	collection-item-width="'100%'"
	class="item item-text-wrap">
		<p>{{item.text}}</p>
	</div>
</div>
6

Try this, i assume that you don’t have a list

    <ion-list>
        <div class="card">
            <ion-item collection-repeat="item in items"
                 collection-item-height="100"
                 collection-item-width="'100%'"
                 class="item item-text-wrap">
                <p>{{ item.text }}</p>
            </ion-item>
        </div>
    </ion-list>
7

this is not the problem…
but thanks!

8

Ok

I have this code

        <ion-list>
          <ion-item collection-repeat="coupon in coupons"
                  collection-item-height="100"
                  collection-item-width="'100%'"
                  href="#/app/coupons/{{coupon.idcupon}}" class="config-list-bg item item-thumbnail-left">
            <img ng-src="{{ coupon.archivo_imagen_externa }}">
            <div class="item-titlte-text">{{ coupon.nombre }}</div>
            <div class="item-subtitlte-text">{{ coupon.titulo }}</div>
            <div class="item-subtitlte-text">{{ coupon.mensaje }}</div>
        </ion-item>
    </ion-list>

Works perfectly, if you put some example on codepen maybe some other can help you.

Best Regards

9

Thanks man, but you are not using cards…

10

Hi,
this problem has been solved?
By Directive seems that it can also be used with cards, but did not succeed.

Thanks

11

Solved!

codepen.io/lughino/pen/BuzwI

2 Likes
12 
<div collection-repeat="item in items" >
    <div class="card">
        <div class="item item-text-wrap">
             <p>{{item.text}}</p>
        </div>
     </div>
</div>

Hope this works :slight_smile:

With new collection repeat , item-width and height are optional. They are computed from first item.

13

Having the same problem… I dont think that it is ideal to use collection repeat with cards inside, although its much smoother to scroll as ng-repeat. Problem is, if the content of the cards varies in case of different text-length, images and so on, the cards height differs, but collection repeat calculates the height of all items just by the height of the first item. So I guess, its more recommend to use collection-repeat for items of same height. Otherwise, I don’t know if its recommend to get each card-height by some javascript-hack to assign it in particular…

14

I have the same problem.

The cards tend to overlap down the list.

I had to remove the ripple effect as the scrolling triggers ripples and is slow and sluggish. Any thoughts?

15

@Venkateshwar, I’m also having the problem with cards overlapping.

I think the main reasons I’m running into this problem is because I’m using ng-src on an image tag with the image width set to 100%, so the height is dynamic. If the first card is short, it causes the next two cards that are taller to overlap.

I solved this by setting the max-height css for the div surrounding the img tag to a fixed height… this seems to have solved my problem, but it seems clumsy to me.

Did you make any progress?

16

Any update on this? I’m trying to use collection-repeat with Cards and I’m just seeing an ordinary list view. I tried lughino’s demo but its still buggy in that it starts out as a regular listview but only displays the cards correctly after scrolling down a bit.