使用 Angularjs 提交动态 table

Question

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

数据：

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

这是我的 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>

table显示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 我在这里做错了什么？

Answer 1

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

https://jsfiddle.net/x9o92yxp/

使用 Angularjs 提交动态 table

Submitting dynamic table with Angularjs

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-model