在使用ng-repeat時避免表格中列的重複索引

下面是我在其中顯示基於不同月份的輸出類型的plunker。我希望通過點擊保存按鈕保存每月的最大容量通過獲取數組中的所有值。但是，當我鍵入文本框時，值重複，因爲索引重複列明智。在使用ng-repeat時避免表格中列的重複索引

下面是代碼：

的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>

來源

2015-09-25 forgottofly

請[編輯]中的相關代碼，在您的文章的文本。外部鏈接不能替代郵件本身的代碼。 – ryanyuyu

@ryanyuyu我沒有收到您的評論 – forgottofly

您的問題不包含任何代碼。請包括代碼。我注意到你有一個鏈接到一個plunker，所以從plunk複製一些相關的代碼到你的問題。 SO上的所有帖子都必須能夠獨立運行，以防任何外部資源中斷。 – ryanyuyu

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

來源

2015-09-25 13:12:50

因此，在保存數據之後，我需要使用與您顯示的類似格式的JSON，以便我可以將它們綁定回去？ – forgottofly

你能解釋一下問題的原因是什麼以及爲什麼會修復它？ –

我想要將數據綁定回來。所以我想知道JSON格式將值重新綁定到正確位置的文本框中 – forgottofly

解決方案，如果你要離開的陣列。

您需要輸入

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

更改ngModel到

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

下面是一個例子：

Example

來源

2015-09-25 13:15:53 Niezborala

在使用ng-repeat時避免表格中列的重複索引

回答

相關問題