javascript - 使用 Angularjs 提交动态表

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>

该表显示 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/