Btukfyl

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:

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>

Can someone please help me out?

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 }.