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>
3
  • Can you show us the content of v.Items ? And the way you declare the aura attribute
    – Simonp
    Commented Jan 18, 2017 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
    Commented Jan 18, 2017 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
    Commented Jan 18, 2017 at 16:12

1 Answer 1

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.

2

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .