0

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?

  • Can you add your apex and init js? – Pranay Jaiswal Nov 18 '19 at 8:39
  • Sure, see the question as modified. The code works though. for event.currentTarget.checked I get a result. – user40501 Nov 18 '19 at 8:50
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.

| improve this answer | |
  • 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. – user40501 Nov 18 '19 at 15:32
  • Sorry, missed Your message, if You are stilll strugling with it, I can help You, no probs. Just let me know how we can have a chat etc. – patryk Nov 26 '19 at 11:10
  • 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. – user40501 Nov 27 '19 at 7:54

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.