Angular dynamically access to object properties

Question

I Need to access dynamically to different object properties in a loop but seems not valid.

<tr ng-repeat="item in Items">
    <td>
        {{item.itemName}} <!-- OK -->
    </td>
    <td ng-repeat="monthName in months.monthName">
        <input class="form-control text-right"
               value="{{item.monthName}}" <!-- KO -->
               <!-- value="{{item.january}}"  OK -->
               >
    </td>                             
</tr>

Answer 1

You need to use bracket notation for this, i.e

  <input class="form-control text-right"
           value="{{item[monthName]}}"

I am not sure if your intention of using value is correct here or not, however if you mean to use ng-model then it would be:

  <input class="form-control text-right"
           ng-model="item[monthName]"

Otherwise you are referring to the property monthName of the object item and not the property with the name representing the value of monthName of the object item.

Answer 2

You are trying to access the property called monthName of the object item. If you want to use monthName as an identifier for retrieving something like item.january you can use the notation item[monthName] The code will look like so

<tr ng-repeat="item in Items">
    <td>
        {{item.itemName}} <!-- OK -->
    </td>
    <td ng-repeat="monthName in months.monthName">
        <input class="form-control text-right"
               value="{{item[monthName]}}" <!-- OK -->
               >
    </td>                             
</tr>