1

I have a component which has a list of teams over which the aura:iteration is looping. I want to use the placeholder attribute of lightning:input as such:

<aura:iteration items="{!v.dToPart.teams}"  var="eachTeam" indexVar="index">
  <div class="slds-col slds-size_4-of-12 " >
    <lightning:input placeholder="{'Name of team '+ #index+1}" aura:id="dToPart" value="{!eachTeam.name}" required="true"/>
  </div>
</aura:iteration>

But this gives the following result:

Merge expression of string with aura iteration index fails

This works perfectly fine, if i only include the index in the merge expression:

<aura:iteration items="{!v.dToPart.teams}"  var="eachTeam" indexVar="index">
  <div class="slds-col slds-size_4-of-12 " >
    <lightning:input placeholder="{'Name of team '+ #index+1}" aura:id="dToPart" value="{!eachTeam.name}" required="true"/>
  </div>
</aura:iteration>

Works when merge expression only has index

Can someone please help me out?

5

Expressions need to start with # or ! to be recognized:

<lightning:input placeholder="{#'Name of team '+ (index+1)}" ... />

Note that the inner ( and ) are necessary to treat the index + 1 as arithmetic instead of string concatenation.

An expression is always in the form of {, followed by # or !, followed by the expression to be evaluated, and finally ending in }.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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