Place item after collection-repeat


#1

Hi,

I’m stuck trying to place an item at the end of a collection-repeat list. Here is what I currently have; but the “Enter a filter for more items…” item always appears at the top of the list.

<ion-content class="item-picker">

    <div class="list">

        <a class="item item-icon-right collection-repeat-item"
           collection-repeat="item in model.items"
           collection-item-height="51"
           collection-item-width="'100%'"
           ng-click="selectItem(item)">
            {{ item.desc }}
            <i class="icon ion-ios7-arrow-right"></i>
        </a>

        <div class="item item-icon-right bold" ng-show="model.hasMoreItems">
            <i class="icon ion-ios7-search"></i>
            Enter a filter for more items...
        </div>

    </div>

</ion-content>

How can I get the item to show as the last item?

Thanks


#2

The first thing I would try - to place it as a last item in the array.


#3

Actually I’ve tried this and it works but it makes the mark-up look messy - since the classes of the item and icon are different - I have to conditionally set the classes…
I was hoping for a more elegant way to do this…


#4

Yeah, I agree that it’s not that elegant, but it’s the easiest way. I bumped into same stuff while making grouped contact list and needed to insert items with group names, so I just used codepen example as a base. It’s a bit messy, but no that bad.


#5

Yes it will have to do for now, unless someone from the Ionic team comes back with a good suggestion :slight_smile:
@rockit thanks for your time…