使用 ng-repeat 时避免表中列中的重复索引答案

【问题标题】：Avoiding duplicate index in columns in table when using ng-repeat使用 ng-repeat 时避免表中列中的重复索引
【发布时间】：2015-09-25 12:40:38
【问题描述】：

下面是我的 plunker，我试图在其中显示基于不同月份的输出类型。我想通过获取数组中的所有值来保存每个月单击保存按钮的最大容量。但是当我在文本框中键入值会随着索引按列重复而重复。

ng-repeat in table

下面是代码：

JavaScript：

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';

    $scope.outputType=["Coal","ROM","WASTE"];
    $scope.months=["JAN","FEB","MARCH","APRIL"];
    $scope.values = [];
    $scope.save=function(){
        alert($scope.values)
    }
});

HTML：

  <table style="border:1px solid red;">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th ng-repeat="i in months"><b>{{i}}</b></th>
        </tr>
    </thead>
    <tbody ng-repeat="item in outputType">
        <tr>
            <td>{{item}} </td>
            <td ng-repeat="i in months">
                <input type="text" ng-model="values[$index]"
                       placeholder="Max.Capacity">

            </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

请在相关代码中edit作为您帖子中的文字。外部链接不能替代帖子本身的代码。
@ryanyuyu 我没有收到你的评论
您的问题不包含代码。请附上代码。我注意到您有一个指向 plunker 的链接，因此将 plunk 中的一些相关代码复制到您的问题中。 SO 上的所有帖子都必须能够独立存在，以防任何外部资源中断。
另外，您的链接无效。

标签： javascript angularjs ng-repeat

【解决方案1】：

检查http://plnkr.co/edit/4DUDIBoTOCI4J89FiQeM?p=preview

$scope.values = {};

HTML

<input type="text" ng-model="values[item][i]"  placeholder="Max.Capacity">

或

<input type="text" ng-model="values[i][item]"  placeholder="Max.Capacity">

【讨论】：

所以在保存数据后，我是否需要使用与您显示的格式相似的 JSON，以便将它们绑定回来？
您能解释一下问题的原因以及解决此问题的原因吗？
我想将数据绑定回来。所以我想知道 JSON 格式以将值绑定回文本框中的正确位置
更新了插件。我不知道你在做什么，你的 JSON 格式是什么。我刚刚向您展示了如何使用 JS 和 Angular 视角的二维图输入和打印结果。
您也可以帮我修改 $scope.values 中的数据为 [ { "name": "Coal", "month": "JAN", "value": 32 }, { "名称”：“ROM”，“月”：“FEB”，“价值”：37 }，{“名称”：“废物”，“月”：“三月”，“价值”：34 }]

【解决方案2】：

如果你想留下一个数组的解决方案。

您需要在输入中更改您的 ngModel

<input type="text" ng-model="values[$index]" placeholder="Max.Capacity">

到

ng-model="values[$parent.$index][$index]".

这是一个例子：

Example

【讨论】：