I have one scenario in which wrapper list is iterating using aura iteration. Inside iteration there is one text field and one dropdown ui:inputselect and ui:inputSelectOption options are also coming dynamically which contains fields. I want if one value in dropdown is changed, the text field gets changed.

For ex. If I select any date field from dropdown, the text field should be converted and one date picker should appear.

How to get which field is changed because we cannot have dynamic aura:id.

<aura:iteration items="{!v.wrapperList}" var="wrap" indexVar="i">

            <ui:inputSelect multiple="false" value="{!wrap.fieldName}" class="form-control">
                <ui:inputSelectOption text="Select Field" label="Select Field" disabled="true" class="form-control"/>
                <aura:iteration items="{!v.objFieldsList}" var="fields">
                    <ui:inputSelectOption text="{!fields}" label="{!fields}" class="form-control"/>

            <ui:inputSelect multiple="false" value="{!wrap.opVal}" class="form-control">
                <ui:inputSelectOption value="=" text="EQUALS" label="EQUALS" class="form-control"/>
                <ui:inputSelectOption value="!=" text="NOT EQUALS" label="NOT EQUALS" class="form-control"/>

            <ui:inputText placeholder="Value" value="{!wrap.fieldVal}" class="form-control" required="true"/>

  • To deal with this I think you should go with child component and in the child component add the tr content. Does it make sense? Sep 5, 2017 at 1:50
  • And can you share the possible options available for the first ui:inputSelect the objFieldsList value and the text field type mapping as well witht the objFieldsList values. Sep 5, 2017 at 1:52

2 Answers 2


We use a simple workaround when detecting change events on specific rows. Assign a data attribute with the id value you are interested in to the closest HTML element (in your case the td). Then, in your event handler walk through the event.path array until you get to your td and pull the id out of the dataset.


You can use the change attribute and invoke a function from your controller like this:

 <ui:inputSelect multiple="false" value="{!wrap.opVal}" class="form-control" change="selectChangeHandler">

Inside your controller, you can hide/display fields using their aura:id attribute

  • @prashanthkrYes, we can use change event. But how to set different id for different rows. In my case, rows are coming dynamically so how to know which row's picklitst is changed. As aura:id doesn't allow to be dynamic.
    – Mayank
    Jun 28, 2016 at 6:16
  • You can use dynamic ids in aura:id like this: aura:id="{!'selectOption'+i}" Jun 28, 2016 at 15:54
  • Try this: Use html input instead of lightning one because they are made specifically for type of data they hold. In html input there is "type" attribute which accepts values like: date, datetime, text, number etc. Handle this type attribute value dynamically and then it should be rendered properly. Also html input can have dynamic ID's assigned so that's good for you. Have a try on it. Nov 6, 2016 at 22:03
  • 2
    @prashanthkr According to the documentation, you cannot use dynamic ids in an aura:id. aura:id doesn't support expressions. You can only assign literal string values to aura:id. ... developer.salesforce.com/docs/atlas.en-us.lightning.meta/… Jan 14, 2017 at 5:33

You must log in to answer this question.

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