I am currently writing a lightning component made of a table of elements that can be selected (or not) using a ui:inputCheckbox.
So the way I do is fetching the data from APEX controller during the onInit()
method call and store them in a aura:attribute:
<aura:attribute name="products" type="Object[]" default="[]" />
Every product is an object with an array of options inside it:
product: { selected: false, options: [] }
My component is made of an iteration over the products to store them in a <table>
but also of an inner iteration product's options.
<aura:iteration items="{!v.products}" var="product">
<ui:inputCheckbox value="{! product.selected }"
updateOn="change,click"
change="{! c.productSelected }" />
<aura:iteration items="{!product.options}" var="option">
<ui:inputCheckbox value="{! option.selected }"
updateOn="change,click"
change="{! c.optionSelected}" />
</aura:iteration>
</aura:iteration>
My problem is that I have an handler on option
that should check the parent product when selected and an handler on product
that should uncheck its options when unchecked.
({
optionSelected: function(component, event, helper) {},
productSelected: function(component, event, helper) {
const products = component.get('v.products');
// find options or product the way you want
// product.selected = true;
// product.options.forEach(option => option.selected = false);
component.set('v.products', products);
}
})
But doing this way, my ui:inputCheckbox
are not updated depending on the selected
attribute even if the v.products
object is well updated.
Any idea the way I can trigger the UI to refresh depending on those values ?
Thank you.