在angularjs中使用動態行的表中進行驗證

我有一個帶有動態行的表，當我按下「add row」主行時被複制並添加到數組中。但是，當它複製 - 也複製了ID，並且我不需要更改此ID。我複製的主要領域是這樣的：在angularjs中使用動態行的表中進行驗證

$scope.addRow = function() { 
    var copy = angular.copy($scope.item[0]); 
    $scope.item.push(copy) 
    }

驗證工作是這樣的：

ng-class='{"is-invalid": tableForm[field.id].$invalid}'

我想添加第二ng-form爲<tr>，與像動態域名：ng-form="{{row + $index}}"，但在webstorm它的亮點像錯誤，所以我猜它必須是靜態名稱。現在當我有無效的字段 - 所有列將是紅色（錯誤）。我如何不改變ID的驗證字段分開？在名稱字段

改變HTML文件 My plnkr example

來源

2016-09-09 YoroDiallo

使用$指數在plunker如下

<!DOCTYPE html> 
<html ng-app='App'> 

    <head> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    </head> 

    <body ng-controller='Ctrl'> 
    <h1>table</h1> 
    <table> 
     <thead> 
     <tr> 
      <th ng-repeat='item in item[0].field'>{{item.name}}</th> 
     </tr> 
     </thead> 

     <tbody ng-form='tableForm'> 
     <tr ng-repeat='row in item'> 
      <td>{{$index}}</td> 
      <td ng-repeat='field in row.field'> 
      <input type="text" 
        ng-model='field.value' 
        name='{{$index}}' 
        required 
        ng-class='{"is-invalid": tableForm[$parent+$index].$invalid}'> 
      </td> 
      <td ng-if='$index !== 0' 
       style='color:red;cursor:pointer' 
       ng-click='removeRow($index)'>X</td> 
     </tr> 
     </tbody> 
    </table> 
    <button ng-click='addRow()'>add row</button> 
    </body> 

</html>

來源

2016-09-09 12:55:42

遺憾的是它不工作，淡然添加的字段是從原來的拷貝，所以每行會包括0 ，1，2，3和錯誤將是相同的 – YoroDiallo

檢查更新的答案 –

不工作，不幸的是我不需要在我的表上添加新的字段，但thx無論如何） – YoroDiallo

在angularjs中使用動態行的表中進行驗證

回答

相關問題