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

  • Are you loading next set of 10 items when user clicks on the load more button? – itzmukeshy7 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>
  • Awesome, this is simple and works – Angelo Aug 29 '16 at 23:23
  • You're very welcome Angelo. – Cloud Ninja 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>
  • 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. – Caspar Harmer 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.