Question

我有一个动态行表，当我按＆＃34;添加行＆＃34;主行被复制并添加到数组中。但是当它复制时 - id也被复制了，我不需要更改此ID。我像这样复制主要字段：

  $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的情况下单独验证字段？ My plnkr example

Answer 1

在名称字段中使用$ index

更改你的plunker中的html文件，如下所示

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

  <head>
    <script data-require="angularjs@1.5.8" 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>

在表中验证angularjs中的动态行

1 个答案: