使用Angularjs提交动态表答案

【问题标题】：Submitting dynamic table with Angularjs使用Angularjs提交动态表
【发布时间】：2016-04-02 04:08:30
【问题描述】：

我正在为下一个场景苦苦挣扎

数据：

$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'}
];

这是我的桌子

<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>

表格显示 2 行 12 列，每列值为 1，将第一行的第一学期设置为值 2，将第二行设置为最后一个学期的值为 2，并提交我得到下一个对象的表单：

        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
        };

所以结果不是我所期望的。我在这里用Angularjs做错了什么？

【问题讨论】：

你需要发布你所有的控制器代码，这还不够，如果你能把它放在一个很棒的小提琴中

标签： javascript angularjs angularjs-ng-repeat angularjs-ng-model

【解决方案1】：

您在输入中以错误的方式使用模型，您可以通过ng-model="item[monthName.text]" 引用它。检查我的例子：

https://jsfiddle.net/x9o92yxp/

【讨论】：