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

标签 javascript angularjs angularjs-ng-repeat

下面是我的插件,我试图在其中显示基于不同月份的输出类型。我想通过获取数组中的所有值来单击“保存”按钮来保存每个月的最大容量。但是当我在文本框中键入该值将重复,因为索引按列重复。

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>

最佳答案

检查 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">

关于javascript - 使用 ng-repeat 时避免表中的列出现重复索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32782463/

相关文章:

javascript - 如何在嵌套的 ng-repeat 中使动态绑定(bind)的 AngularJS 模型在模型从其他地方提供数据之前不会抛出错误?

javascript - 如何限制用户在 ui-ace 编辑器中只写一个 javascript 函数(方法)

javascript - 如何将 service worker 与 FCM 一起用于推送通知

javascript - "right"处理迟到响应的方法是什么

javascript - 是否可以在 Angular 日期范围选择器中设置动态范围?

php - AngularJs + PHP 插入数据在第一个表中有效,但在第二个表中无效

javascript - ng-repeat 不列出电影标题

javascript - 有没有办法检查 var 是否正在使用 setInterval()?

javascript - 即使字段为空也会执行mysql查询

javascript - 使用 MozMill 测试独立 XUL 应用程序