3

Requirement: This may sound crazy but my requirement is to show an input field to change the value and a text field to display the original value.

Problem: Once user changes the value in input field, the original value displayed is also rerendered. This might be a feature in Lightning world but how do I solve this for my requirement.

Here is sample code for the problem:

Example.cmp:

<aura:component >
    <aura:attribute name="ListVar"
                    type="List"
                    default="[{'dt':'2017-01-01'},
                              {'dt':'2017-01-31'}]">
    </aura:attribute>
    <table>
            <aura:iteration items="{!v.ListVar}" var="item">
                <tr>
                    <td>
                        <ui:inputDate value="{!item.dt}"
                                      displayDatePicker = "true">
                        </ui:inputDate>
                    </td>
                    <td>{!item.dt}</td>
                </tr>
        </aura:iteration>

    </table>
</aura:component>

Initially it displays as below:

enter image description here

But if I change the input value, the original value displayed also changes.

enter image description here

  • 1
    Have tried using the # yet?: When to use {#v.attrib} vs {!v.attrib}? – martin Dec 30 '16 at 3:11
  • @martin It is funny. I read that when it was initially posted but never really understood it and did not even bother to understand it completely. Now it is clear. Thanks for posting it. – javanoob Dec 30 '16 at 3:15
  • @javanoob Just one way binding wont help you here since it will always show a constant value .Have you tried it ? – Mohith Shrivastava Dec 30 '16 at 3:45
  • 2
    @javanoob When should the original value display update? Never? If that's the case, then # should cover you, otherwise you might need two attributes to store the old and new values, which you can update in your controller when you want to. – sfdcfox Dec 30 '16 at 3:51
  • 1
    @javanoob yes then one way binding will work . – Mohith Shrivastava Dec 30 '16 at 3:56
3

You could use a one-way binding with the {#v.attrib} syntax to set the value when the component is rendered initially, and not update when the attribute value is changed:

<td>{#item.dt}</td>

See also: When to use {#v.attrib} vs {!v.attrib}?

| improve this answer | |
  • how to get old value of an attribute in controller? I am creating another attribute just to store old value. But that attribute is also reflected with updated value. – Jigar Trivedi Sep 6 '18 at 14:09

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.