2

I am iterating through a list of items as follows

<aura:iteration items="{!v.objWrap}" var="item" indexVar="idx">
...
...
...
 </aura:iteration>

I also want to have a load more button after this that shows an additional 10 items.

<a href="javascript:void(0); onclick="myfunction()"">Load More</a>

Is it possible to filter the iteration to show a set amount, then when I click the load more, it loads another 10? Is there a way through salesforce that would make this easier?

Thanks

1
  • Are you loading next set of 10 items when user clicks on the load more button? Jan 24, 2018 at 10:13

2 Answers 2

2

You simply use aura:if and check if you indexVar is smaller or equals 10. I think it should look something like this.

<aura:iteration items="{!v.objWrap}" var="item" indexVar="idx">
    <aura:if value="{!idx < 10}">
        <a href="javascript:void(0); onclick="otherfunction()"">{!item.Something__c}</a>
    </aura:if>
    <aura:if value="{!idx == 10}">
        <a href="javascript:void(0); onclick="myfunction()"">Load More</a>
    </aura:if>
</aura:iteration>
2
  • Awesome, this is simple and works
    – Angelo
    Aug 29, 2016 at 23:23
  • You're very welcome Angelo.
    – brovasi
    Aug 29, 2016 at 23:25
4

Just for reference, here is verified working code - it's very similar to that shown above, but I fixed a couple of issues:

<aura:iteration items="{!v.objWrap}" var="item" indexVar="idx">
  <aura:if isTrue="{!lessthan(idx,10)}">
    <a href="javascript:void(0);" onclick="otherfunction()">{!item}</a>
  </aura:if>
  <aura:if isTrue="{!idx == 10}">
    <a href="javascript:void(0);" onclick="myfunction()">Load More</a>
  </aura:if>
</aura:iteration>
5
  • You could improve it using else
    – pfernandez
    Aug 30, 2016 at 12:08
  • <aura:component> <aura:if isTrue="{!v.truthy}"> True <aura:set attribute="else"> False </aura:set> </aura:if> </aura:component>
    – pfernandez
    Aug 30, 2016 at 12:09
  • 1
    Actually, no - there are three conditions here. If less than 10, render stuff. If 10, render "Load More" and an implied Else - don't render anything. Aug 30, 2016 at 17:19
  • You are right, it depends on the content, I thought that if 10 is the last value of the objWrap, you could to render it in the else condition
    – pfernandez
    Aug 31, 2016 at 18:47
  • Casper's answer is best but here is a way to do the expression with the < operator. <aura:if isTrue="{! (inx * 1) &lt; v.listLimit }">
    – Bryan
    Jun 15, 2018 at 16:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .