1

I need to be able to call different checkboxes in an aura:iteration:

   <aura:attribute name="orders" type="Order[]"/>  
   <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

   <aura:iteration items="{!v.orders}" var="item">
      <tr class="slds-hint-parent">
         <td data-label="Selected">
            <div class="slds-truncate" title="Selected"><input type="checkbox" checked="true" name="{!item.Id}" id="checkbox-01" value="checkbox-01" tabindex="0" aria-labelledby="check-button-label-01 column-group-header" onchange="{! c.selectOrder }" data-order ="{!item.Id}"/></div>
         </td>
      </tr>
   </aura:iteration>

Init-Function:

doInit : function(component, event, helper) {

    var getOrders = component.get("c.getOrders");       
    getOrders.setCallback(this, function(responseOrders){
    component.set("v.orders",responseOrders.getReturnValue());
    });       
    $A.enqueueAction(getOrders);    
},

Apex for init function:

   @AuraEnabled
   public static list <Order> getOrders(){
      return [SELECT Id, OrderNumber, orderNumber__c, TotalAmount, IsReductionOrder, AmountOfReduction__c, Offener_Posten__c, OriginalOrderId, OriginalOrder.OrderNumber, store__c, EffectiveDate, Status FROM Order ORDER BY EffectiveDate DESC];
   }

Getting and setting the value of the current checkbox happens via: event.currentTarget.checked.

But I want to set the value of an other checkbox in the iteration. I read that you cannot use aura:id dynamically, so I have to do that via the name property. I set the name to name="{!item.Id}".

Upon my understanding, dynamic binding works like this:

var orderId = event.currentTarget.dataset.order;
component.set("v.orderId", false);

But this does not work. How then can I set the other checkboxes in my case?

0

2 Answers 2

1

You can easily set the value of the checkboxes using a property on the orders array. All you need to do is iterate over the array and add another property to the elements. For ex -

let values = responseOrders.getReturnValue();

for (let val of values) {
  val.isChecked = false // or true
  // here you can different properties
}

// set the array to a aura:attribute
component.set("v.orders",values);

Now in aura:iteration -

<aura:iteration items="{!v.orders}" var="item" indexVar="index">
    <tr class="slds-hint-parent">
        <td data-label="Selected">
            <div class="slds-truncate" title="Selected">
                <input type="checkbox" checked={!item.isChecked} 
                       name="{!item.Id}" id="checkbox-01"
                       value="checkbox-01" tabindex="0" 
                       aria-labelledby="check-button-label-01 column-group-header"
                       onchange="{! c.selectOrder }" data-order="{!item.Id}" 
                       label="{!index}"/>
            </div>
        </td>
    </tr>
</aura:iteration>

Now by clicking a checkbox, you can get an index by using the indexVar property on aura:iteration and get it in the controller like -

let indexvar = event.getSource().get("v.label");
let orders = component.get("v.orders");
let theCurrentCheckbox = orders[indexVar];
theCurrentCheckbox.isChecked = !theCurrentCheckbox.isChecked;
orders[indexVar] =theCurrentCheckbox ;
component.set("v.orders",orders);
0
0

Simple and elegant solution would be to extract table row to seperate component, pass whole single child as parameter, and do business logic inisde every single row component using init or change handlers. In child component You can easily declare Boolean attribute, and write nice logic to handle its value, and display via 2-way-binidng, avoiding any "dirty" hacking with dynamic aura ids, and accessing directly the DOM. I think this approach is known as lightning best practice, and it gives You much better control over data, also makes code easier to read, understand and maintain.

2
  • I think it is also not that easy with a boolean parameter. The issue is that when I check a box, then there should be an algorithm to check for dependent (reduction) orders, and automatically also the checkboxes for these orders in the list should get checked. If you can help me a bit more specifically with the solution for this that would be great. Commented Nov 18, 2019 at 15:32
  • Thank you, patryk, but in the end I reworked the code and implemented a wrapper class, so that the checkbox would rerender once I set the values in the controller. Still it would have been nice though to know how to set the value of a checkbox within an aura:iteration as described in the question. But I think it is not possible, at least this is what I understand having done some research. Commented Nov 27, 2019 at 7:54

You must log in to answer this question.

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