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 '18 at 10:13
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 '16 at 23:23
  • You're very welcome Angelo. Aug 29 '16 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 '16 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 '16 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 '16 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 '16 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 '18 at 16:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.