Changing ng-repeat to Collection-repeat not working


#1

In order to avoid div creation as in the case of ng-repeat, I want to change the implementation using collection-repeat.But its not at showing the initial divs itself. Can someone help me here ?

The code using ng-repeat is added below:

	<div class="list" ng-repeat="subCatItem in getSubcats() track by $index">
		<h4>Title: {{subCatItem.title}}</h4>
		<!-- HORIZONTAL LISTING OF IMAGES WITH TITLE -->
		<ion-scroll  direction="x"  class="item wide-item">
	        <div ng-repeat="item in getSubcatData(subCatItem) track by $index"  
	            class="item">     
	           <p>{{$index}}<img ng-src='{{item.images[0]["thumb-url"]}}' /></p> 
	        </div>
	         <ion-infinite-scroll
			    on-infinite="loadMoreSubItems(subCatItem)"
			    distance="1%">
			 </ion-infinite-scroll>
		</ion-scroll>
	</div>
</ion-content>

Please help me to convert the same with collection-repeat.Its urgent.


#2
<div collection-repeat="item in getSubcatData(subCatItem) track by $index"  
            class="item" collection-item-height="150" collection-item-width="'100%'" style="height:150px; height: 100%;">

#3

I have the same issue.

I am trying to migrate from this:

         <a  class="item item-thumbnail-left"
         ng-repeat="item in items" >
            <img class="icon" >
            <h2>{{item.name}}</h2>
            <p style="font-style:italic;" class="item-titulo">{{item.date | date: 'medium'}}</p>
        </a>

to this:

  <a class="item item-thumbnail-left"
  collection-repeat="item in items" 
  collection-item-height="'20%'"
  collection-item-width="'100%'">
   <img class="icon" />
   <h2>{{item.name}}</h2>
   <p style="font-style:italic;" class="item-titulo" >{{item.date | date: 'medium'}}</p>
</a>

But it doesnt work, it doesnt display the list.

A lot of thanks in advance.

Hope you can help me.


#4

could you please build a littel codepen?


#5

Reading the documentation i found out i cant use ng-show if i am using collection repeat. Then i have a doubt: I am displaying the list (represented by the collection repeat that i am trying to make it work) depending of a condition (so i need the ng-show wrapping the collection-repeat), then how can i do that if i cant use the ng-show ?

A lot of thanks in advance!


#6

hello @Miguelme, did you find a solution to the above ?
thanks !


#7

Sorry for being so late, i could find a solution since the new collection-repeat is less restrictive with the stable releases.

Thanks,


#8

@Miguelme thanks for reply