Search code examples
bindingaurelia

How to set value.bind in array using the index inside repeat


I have a dynamic form build with repeat, id like to bind its value to array object and i want to use the $index to set the value to the write object in the array.

How the set the binding in the array in the current index and property name

The code

    guaranteeItems = [
    {
        type: 'text',
        label: 'firstName,
        property: 'personFirstName'
    },
    {
        type: 'text',
        label: 'lastName,
        property: 'personLastName'
    },
]

 guarantee = [
    {
        personFirstName: '',
        personLastName: '',
        personProffesion: '',
        personMainIdentityTypeId: '',
        personMainIdentityNo: '',

        addressStreetName: '',
        addressStreetNo: '',
        addressEntrance: '',
        addressCityId: '',
        no: ''
    }]  

     HTML Code: 
     <template repeat.for="testInput of guaranteeItems">
        <label>${$index + 1}.*</label>
         <div>
            <label for="fname">${testInput.label}</label> // This is working
            <input type="text" value.bind="guarantee[${$index}].$index.property" required> // This is not working 
        </div> 
    </template>

Solution

  • To set the binding in the array at the current index and property name, you can use the following syntax for Aurelia binding:

    <input type="text" value.bind="guarantee[$index][testInput.property]">
    

    Here, guarantee[$index] will access the object in the guarantee array at the current index $index, and [testInput.property] will access the property specified in the current testInput object.

    So, your updated code will be:

    <template repeat.for="testInput of guaranteeItems">
      <label>${$index + 1}.*</label>
      <div>
        <label for="fname">${testInput.label}</label>
        <input type="text" value.bind="guarantee[$index][testInput.property]" required>
      </div> 
    </template>
    

    In your original code, you were using ${} to try to dynamically compute the property name of the guarantee object based on the current index $index and the property value of the testInput object. However, this syntax was incorrect and caused the binding expression to fail because the interpolation syntax is for displaying values, not being used inside binding expressions.

    Hope this makes sense.