4

I am seeing a weird behavior with ui:inputNumber and here is the sample code:

Controller:

public class ControllerClass {

    @AuraEnabled 
    public static List<A> getData() {
        List<A> aList = new List<A>();
        for(Integer i=0;i<3;i++){
            B bObj = new B(i);
            A aObj = new A(bObj);
            aList.add(aObj);
        }
        return aList;
    }

    public class A{
        @AuraEnabled
        public B bObj{get;set;}
        public A(B obj){
            bObj = obj;
        }
    }

    public class B{
        @AuraEnabled
        public Decimal someDecimal{get;set;}
        public B(Decimal d){
            someDecimal = d;
        }
    }
}

ExampleApp.app:

<aura:application extends="force:slds" controller="ControllerClass">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="dataMap" type="ControllerClass.A[]"/>

    <div style="width:100px;">
        <aura:iteration items="{!v.dataMap}" var="dataVar">
            <ui:inputNumber aura:id="input-Number" class="slds-input" value="{! dataVar.bObj.someDecimal}"/>
        </aura:iteration>
    </div>

</aura:application>

ExampleAppController.js:

// Controller
({
    doInit: function(component, event, helper) {
        // Request from server
        var action = component.get("c.getData");
        action.setCallback(this, function(result){
            component.set("v.dataMap", result.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

Output:

enter image description here

What is wrong with this code?

Additional details/update:

  1. Looks like this is happening because the variable is two levels deep(ControllerClass -> A -> B). When I moved the decimal variable to class A and removed the class B(entirely) then it is working fine.
  2. Same thing happening with ui:inputText. Looks like these tags don't like attribute two levels deep.
  3. But I need data in this particular structure because aura:iteration tag does not allow dynamic index(related question1, related question2)
2

You can create a component just to handle you input, then it works like a charm.

Iteration:

 <div style="width:100px;">
        <aura:iteration items="{!v.dataMap}" var="dataVar">
            <c:DecimalComponent dataObj="{!dataVar}"></c:DecimalComponent>
        </aura:iteration>
    </div>

Component definition:

<aura:component >
     <aura:attribute name="dataObj" type="ControllerClass.A"/>
     <ui:inputNumber aura:id="input-Number" class="slds-input" value="{!v.dataObj.bObj.someDecimal}"/>

</aura:component>

Update: works in v40

| improve this answer | |
  • No, it is not working. – javanoob Jul 14 '17 at 14:43
  • Strange, it is working for me. See imgur.com/a/9wOHK – Roman Jul 14 '17 at 14:50
  • Thanks! I just updated all the involved metadata in this to v40 and it works. Accepting your answer. Thanks. You can update your answer that it is working in v40. – javanoob Jul 14 '17 at 14:54
2

How about storing your B object as a single element list on A?

I know that's less than optimal, but these are the sort of things you need to do to work with the aura:iteration

public class A{
    @AuraEnabled
    public B[] bObjs{get;set;}
    public A(B obj){
        bObj = obj;
    }
}

Then nest two iterators:

<aura:iteration items="{!v.dataMap}" var="dataVar">
  <span>
    <aura:iteration items="{!dataVar.bObjs}" var="bObj">
      <ui:inputNumber class="slds-input" value="{! bObj.someDecimal}"/>
    </aura:iteration>
  </span>
</aura:iteration>

The spans are there to prevent the iterators becoming confused - they may no longer be needed, but it used be necessary sometimes.

| improve this answer | |
  • My usecase is that I need to display rows of data in two columns(like table with two columns but many rows). So my plan was to iterate over array of class A, and each instance of class A will have two instances of class B(representing column 1 & column 2). Not sure if I explained clear but can you suggest a workaround for this? – javanoob Jul 14 '17 at 10:35

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.