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

Avoiding duplicate index in columns in table when using ng-repeat

本文关键字：索引 ng-repeat 使用      更新时间：2023-09-26

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

代码如下:

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>

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

JS 

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

保留数组的解决方案。

你需要修改input

中的ngModel

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

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

下面是一个例子:

示例

相关文章：