AngularJS：ng-form + ng-repeat-start

我有一个表ng-repeat-start，它可以为数组中的每个项目生成4行。AngularJS：ng-form + ng-repeat-start

对于每个ng-repeat，我将创建一个ng-form来验证每个项目并逐个项目地生成错误消息。

构建HTML的正确方法是什么，以便可以从ng-repeat-start和ng-repeat-end之间生成的所有行访问ng-form？

<ng-form name="allItemsForm" novalidate> 
    <table> 
     <thead> 
      <tr> 
       <th>Items</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-form="itemForm" ng-repeat-start="item in ctrl.items"> 
       <td> 
        <input ng-model="item.name" name="name" required /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <textarea ng-model="item.comment" name="comment" required></textarea> 
       </td> 
      </tr> 
      <tr> 
       <td>Error for name: {{ itemForm.name.$invalid }}</td> 
      </tr> 
      <tr ng-repeat-end> 
       <td>Error for comment: {{ itemForm.comment.$invalid }}</td> 
      </tr> 
     </tbody> 
    </table> 

    <button type="submit" ng-disabled="allItemsForm.$invalid"> 
     SUBMIT 
    </button> 
</ng-form>

实施例：https://jsfiddle.net/7163osn2/4/

来源

2016-05-23 Jack Allen

“这样的NG-形式是所有行的访问”，你想达到什么样的？ – shershen

@shershen我已经添加了一个例子。我想使用额外的行来保存关于出现在前几行的错误的信息。 –

''评论错误：{{itemForm | json}}'''在这些行中可用不是吗？ – shershen

根据this它是有效的具有table的内的多个tbody元件。所有td细胞仍然会像他们通常那样与其父母th细胞匹配。

它也消除了对ng-repeat-start的需求，所以您可以回到使用标准ng-repeat。

我的最新消息，例如在原来的问题：https://jsfiddle.net/7163osn2/5/

W3 HTML标记reference

来源

2016-05-24 09:16:25

AngularJS：ng-form + ng-repeat-start

回答

相关问题