4

I'm trying to conditionally format my items in a Winter'17 Org based on a selected index. But comparing the iteration index to my selected index (v.Active) doesn't work. I tried to output it and it seems to be empty.

<aura:iteration items="{!v.Items}" var="item" indexVar="index">                    
<li class="{!'slds-tabs--path__item slds-is-' + (index >= v.Active ? 'complete' : 'incomplete')}" role="presentation">
    [...]
        <span class="slds-tabs--path__title">
            <ui:outputtext value="{!item + ' - ' + index + ';'}" />
        </span>
    [...]
</li>

If I use the index in an output element, it just stays empty

enter image description here

Is this a Winter'17 issue? I it should work based on the SFDC Documentation. aura:iteration

enter image description here

Edit:

Component: ImportWizardTabBar

<aura:component>
<aura:attribute name="Items" type="string[]" default="['1','2','3']" />
<aura:attribute name="Active" type="integer" />    
<aura:registerevent name="tabChange" type="c:StringEvent" />

<div class="slds-grid">
    <div class="slds-tabs--path" role="application">
        <ul class="slds-tabs--path__nav" role="tablist">
            <aura:iteration items="{!v.Items}" var="item" indexVar="index">                    
                <li class="{!'slds-tabs--path__item slds-is-' + (index >= v.Active ? 'complete' : 'incomplete')}" role="presentation">
                    <a class="slds-tabs--path__link" id="tabs-path-2327" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
                        <span class="slds-tabs--path__stage">
                            <c:svgIcon svgPath="/resource/slds102/assets/icons/utility-sprite/svg/symbols.svg#check" category="standard" size="large" name="user" />
                        </span>
                        <span class="slds-tabs--path__title">
                            <ui:outputtext value="{!item + ' - ' + index + ';'}" />
                        </span>
                    </a>
                </li>

            </aura:iteration>
        </ul>
    </div>
</div>

App: ImportWizard

<aura:application  extends="force:slds">
<c:ImportWizardTabBar Items="[
    'Select File', 
    'Import Data', 
    'Map Fields', 
    'Preview Data', 
    'Finish Import']" Active="0" />
</aura:application>
  • Can you show us the content of v.Items ? And the way you declare the aura attribute – Simon Placentino Jan 18 '17 at 15:32
  • 1
    I just tried in my Winter'17 Developer edition org and it is working fine. Can you post complete code or create a simple example showing the problem? – javanoob Jan 18 '17 at 15:39
  • 1
    I tried your code in my Winter'17 Developer Edition org and it is working fine..Here is the screenshot: imgur.com/a/B5q59 – javanoob Jan 18 '17 at 16:12
1

Ok, it seems that my svgIcon Component is causing the problem, I removed it and suddenly the index is working. Puting the text before the Icon works also (but looks ugly)

<a class="slds-tabs--path__link" id="tabs-path-2327" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="javascript:void(0);" aria-live="assertive">
    <span class="slds-tabs--path__title">
        <ui:outputtext value="{!item + ' - ' + index + ';'}" />
    </span>
    <span class="slds-tabs--path__stage">
        <c:svgIcon svgPath="/resource/slds102/assets/icons/utility-sprite/svg/symbols.svg#check" category="standard" size="large" name="user" />
    </span>
</a>

thanks @javanoob for the test, which pointed me into the direction.

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.