Submitting dynamic table with Angularjs

Question

I'm struggling with the next scenario

Data:

$scope.MyItem = [
  {
    "__v": 0,
    "myItemId": "55ed819caefe18e81ffbd2d2",
    "itemId": "56fec8abb192c870117ed393",
    "january": 1,
    "february": 1,
    "march": 1,
    "april": 1,
    "may": 1,
    "june": 1,
    "july": 1,
    "august": 1,
    "september": 1,
    "october": 1,
    "november": 1,
    "december": 1,
    "_id": "56fec8abb192c870117ed394",
    "itemName": "apple"
  },
  {
    "__v": 0,
    "myItemId": "55ed819caefe18e81ffbd2d2",
    "itemId": "56fec8bfb192c870117ed395",
    "january": 1,
    "february": 1,
    "march": 1,
    "april": 1,
    "may": 1,
    "june": 1,
    "july": 1,
    "august": 1,
    "september": 1,
    "october": 1,
    "november": 1,
    "december": 1,
    "_id": "56fec8bfb192c870117ed396",
    "itemName": "other"
  }
];


myapp.monthName = [ 
    {text: 'january'},
    {text: 'february'},
    {text: 'march'},
    {text: 'april'},
    {text: 'may'},
    {text: 'june'},
    {text: 'july'},
    {text: 'august'},
    {text: 'september'},
    {text: 'october'},
    {text: 'november'},
    {text: 'december'}
];  

Here is my table

<form class="form-inline" ng-submit="myapp.updateMyItems()" >

    <tbody>
        <tr ng-repeat="item in MyItem">
            <td>
                {{item.itemName}}
            </td>
            <td ng-repeat="monthName in myapp.monthName">
                <input type="number" 
                       ng-model="MyItem[item._id][monthName.text]"
                       value="{{item[monthName.text]}}"
                       >
            </td>                             
        </tr>
    </tbody>

    <button type="submit">Save</button>
</form>

The table displays 2 rows with 12 columns each with value 1, setting the first semester of the first row with value 2 and the second row with the last semester with value 2 as well and submitting the form I get next object:

        myapp.updateMyItems = function() {
            var countryItem = $scope.countryItem;
            console.log(countryItem); // output:

//          [Object, Object, 56fec8abb192c870117ed394: Object, 56fec8bfb192c870117ed396: Object]
//
//          where Object, Object have the same values of "$scope.MyItem" and 
//          
//          56fec8abb192c870117ed394 has
//              april : 2
//              february : 2
//              january : 2
//              july : 1
//              june : 2
//              march : 2
//              may : 2         
//          ... remaining the last semester exception the july with 1
//          56fec8bfb192c870117ed396 has
//              august : 2
//              december : 2
//              february : 1
//              july : 2
//              november : 2
//              october : 2
//              september : 2       
//          and here the opposite situation from the last object
        };  

So the result is not what I expect. What I am doing wrong here with Angularjs?

Answer 1

You are using the model inside your input in the wrong way, you can reference it by ng-model="item[monthName.text]" . Check my example:

https://jsfiddle.net/x9o92yxp/