Passing iterated variable from Markup to JS Controller

Question

I need a way to keep track of each iterated lightning:inputField so that any changes made to that specific field is reflected by a CSS style change.

Markup

    <aura:iteration items="{!v.layoutAPIFieldsList}" var="e" indexVar="i">
       <aura:if isTrue="{!e.APIName != 'requestDocType__c'}">
          <lightning:layoutItem padding="around-small" size="6"> 
             <lightning:inputField aura:id="{!e.APIName}"
                                   fieldName="{!e.APIName}" 
                                   onchange="{!c.changeInputField}" />
          </lightning:layoutItem>  
      </aura:if>
   </aura:iteration>

JS Controller

changeInputField : function(component, event, helper){  
    var cmpTarget = component.find(/* Iterated Variable */);
    $A.util.addClass(cmpTarget, 'unsavedChanges');      
},

Here in the JS is where I want to pass the iterated variable and apply the CSS. Maybe I should locate it by index or aura:id?

Answer 1

As @glls said - aura:id’s cannot be assigned dynamically

The solution I have for that (For this question and with help of @sfdcfox) is to assign an id to the html element - so you can try in your component markup:

<aura:iteration items="{!v.layoutAPIFieldsList}" var="e" indexVar="i">
   <aura:if isTrue="{!e.APIName != 'requestDocType__c'}">
      <lightning:layoutItem padding="around-small" size="6"> 
         <lightning:inputField id="{!e.APIName}"
                               fieldName="{!e.APIName}" 
                               onchange="{!c.changeInputField}" />
      </lightning:layoutItem>  
  </aura:if>

And then in the js controller:

changeInputField : function(component, event, helper){  
    var cmpTarget = document.getElementById(/* Iterated Variable */);
    $A.util.addClass(cmpTarget, 'unsavedChanges');      
},