Value binding with html elements in lightning framework

Question

In below code I am trying to bind input value with one of the sobject property but currently it is not getting binded. What I need to do so that sobject property will be binded with the html input element. I know I can use ui components but with that LDS is not working as expected so I choose to go with input where styles are working very fine but

<aura:if isTrue="{!v.question.Type__c == 'Radio'}">        
        <fieldset class="slds-form-element">
            <legend class="slds-form-element__legend slds-form-element__label">{!v.question.Description__c}</legend>
            <div class="slds-form-element__control">
              <aura:iteration items="{!v.question.Answers__r}" var="answer" >  
              <label class="slds-radio" for="{!answer.Id}">
                <input type="radio" value="{!answer.Is_Correct__c}"  onchange="{!c.markAnswer}"
                       data-id="{!answer.Id}" name="options" id="{!answer.Id}" />                  
                <span class="slds-radio--faux"></span>
                <span class="slds-form-element__label">{!answer.Description__c}</span>
              </label>
              </aura:iteration>
            </div>
       </fieldset>
    </aura:if>

Please suggest how to bind input variables with sobject fields in lightning framework.

Answer 1

If you are using Winter'17 org, then you could use the <lightning:input type="radio"/> component which aligns the LDS styled component in Lightning Experience.Here's the doc for it.

But if the org you are working on is Summer'16, then you have to manually set the Is_Correct__c.

you need to do something like this:

Component:

<aura:iteration items="{!v.question.Answers__r}" var="answer" indexVar="index">  
    <label class="slds-radio" for="{!answer.Id}">
        <input type="radio" checked="{!answer.Is_Correct__c}" onchange="{!c.markAnswer}"
               data-id="{!answer.Id}" name="options" id="{!answer.Id}" data-ansIndex="{!index"}/>                  
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">{!answer.Description__c}</span>
    </label>
</aura:iteration>

controller.js

({ 
    markAnswer : function(cmp, event, helper) { 
        var question = cmp.get("v.question");
        var answers = question.Answers__r
        var selectedAnsIdx = event.currentTarget.getAttribute('data-ansIndex');

        for(var i = 0;i < answers.length;i++){
            if(i != selectedAnsIdx){
                answers[i].Is_Correct__c = false;
            }
        }

        answers[selectedAnsIdx].Is_Correct__c = true;
        cmp.set("v.question",question);
    }
});