Hello guys
I have a collection repeat and I like know if is possible define automatic height for each item of my list.
Thanks so much
Not right now, it needs to be expressed in directive so that angular knows how many to render.
http://ionicframework.com/docs/api/directive/collectionRepeat/
<div class="item my-item"
collection-repeat="item in items"
collection-item-width="'100%'"
collection-item-height="getItemHeight(item, $index)"
ng-style="{height: getItemHeight(item, $index)}">
{{item}}
</div>
$scope.getItemHeight = function(item, index) {
//Make evenly indexed items be 10px taller, for the sake of example
return (index % 2) === 0 ? 50 : 60;
};Is this possible in future versions of ionic?
Not too sure, but it would be against the point of collection repeat. The point of collection repeat is that angular will only render items that are visible. In order to do that, collection repeat needs to know the height.
Would it be possible to just set the number of items instead of the height for each item?
In some cases it is certain that there would only be at most N items visible.
Ok. but one more question, If I recover one twiiter timeline, their height is variable(dinamic) and there are a lot elements. How could show it efficiently?
If your doing something like a twitter time line, you may want to think about using ng-repeat with the infinite scroll instead of collection repeat.
As for declare the numbers of visible items, that would be a question for @andy
Thank you @mhartington.
In fact, I don’t know how to calculate the height of an item.
I enabled text-wrap for the item, and put some buttons in the item.
Now I am using infinite scroll. After reading the doc, I guess
infinite scroll performs better at both rendering and memory consumption since it only loads just a few items.
However, when lots of items are loaded, infinite scroll may not render well.
So I am wondering if it is feasible to use them together. It would be GREAT if we can.
This post is a bit old, beta 4, but it shows that you can use the two together.
I’m trying to achieve this as well but curious if there’s any way to calculate the height after it’s been rendered to the dom or have access to the div via the custom getItemHeight function.
I have a list of div’s where the text could vary between 3-6 rows and would be nice to get the innerHeight or scrollHeight of the inside content to determine the height and force it to that.
Right now I only see access to the index and the item object
Any hints to where to start? I’ve looked into the renderItem function in the ionic code but still a bit lost
Thanks
This is also my question.
Since calculating the height of an item is the key to use collection repeat,
I think it should be described with more detail in the doc/manual.
1 Like
I’m also in search of a way to do this.
I am thinking along the lines of:
$scope.getItemHeight = function(item) {
return angular.element(item).offsetHeight;
};
But this doesn’t seem to work. Anyone else know how to do this?
Discourse, the forums that we’re using here on the Ionic site funnily enough, have implemented a solution for Ember. I’ve not read the code closely, but the same logic/underlying principles should work within Ionic too:
It’s close, but I still can’t quite figure out how this can be achieved. Anyone had some luck with this? @mhartington?
After doing some digging we can conclude that at this stage collection-repeat can not be used when the height of an item is unknown before the list renders. For instance when your items consists of text elements that have varying lengths. One item might have 20 characters leading it to have one height, the other item might have 8 characters, giving it a smaller height. In this scenario, collection-repeat is not useable in its current form.
More information can be found here:
and
1 Like
I’m having the same issue, I have a list of items that vary in height, it seems like there are a bunch of us.
I haven’t spent the time to look at the collection repeat code but I’m guessing that it calculates which items to display based on the scroll position and the height of the item. If so, for fast scrolling (large swipes) would it be possible to give collection repeat a minimum item height and have it display items based on a minimum height and for slow scrolling (viewing each item after item) just display the next items. Also, once an item is displayed but is no longer on screen collection repeat could keep that items height for more accurate scrolling incase the user scrolls back up. Does that make sense? Would that be possible or are my guesses of how collection repeat works totally off?
BTW, Ionic rocks!! Thanks for building it.
@Tom, a lot of this has already been tested when building collection repeat. When we reworked a bit a few release ago, the second option was tested and proved to kill performance. The collection repeat is right now is probably the best it will be for now
Hi @mhartington!
After this months, I don’t know if the thread is too old, but is there a way to use collection-repeat with different heightselements?
This is my current scenario:
Regards!
Thanks you guys for the great work with Ionic!!!
Could be necesary to add this css?
.item-content
{
height: 100%;
}
My code is this:
<ion-list>
<ion-item
collection-repeat="row in rows"
collection-item-height="100"
ng-click="navigate(row)" style="width:100%; height:100px">
Id: {{row.id}}
Customer: {{row.customercontact}} {{row.customerlocation.customer.name}} {{row.customerlocation.fulladdress}}
<ion-option-button class="button-assertive" ng-click="edit(row)">Edit</ion-option-button>
<ion-option-button class="button-positive" ng-click="delete(row)">Delete</ion-delete-button>
</ion-item>
</ion-list>
Tested in web browser and ionic v.1.0.0 beta 13