Custom Attribute on Object inside List on Lightning Component

Question

I've got a Lightning Component that handles a list of records of a certain custom object. I need to be able to check some of those records to proceed to the next step (the page is pretty much a wizard).

The problem is that I can iterate and display the records correctly, but I want to be able to mark them individually. To do so I thought of a Angular-like approach: create a checkbox and bind it to an attribute on the object that is being displayed on the list. It is like I have the custom object on the list and then I create a new attribute called selected.

On the list I have the following line:

<lightning:input name="selected" type="checkbox" aura:id="{!so.Id + '-checkbox'}" label="{!so.Name}" checked="{!so.selected}"></lightning:input>

The page displays the value correctly then I click the checkbox, but it doesn't seem to pass this attribute to the controller:

var selected = 0
for (var so in sales_orders) {
    console.log(sales_orders[so])
    if (sales_orders[so].checked) {
        selected++
    }
}

I can't retrieve the selected ones because the attribute doesn't exist (as seen on the console).

What would be the best workaround for this?

Answer 1

lightning:input is a component, so you need to use component methods:

var selected = 0;
component.find("selected").forEach(function(field) {
    if(field.get("v.checked")) {
        selected++;
    }
});

Also, you can't use merge fields in aura:id, so you should just change it to aura:id="selected" instead.