Question

我有一个ng-repeat-start的表格，可以在数组中为每个项目生成4行。

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

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

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

Answer 1

根据this，tbody内有多个table元素是有效的。所有td单元格仍将与正常情况下的父th单元格匹配。

它还消除了对ng-repeat-start的需求，因此您可以使用标准ng-repeat返回使用。

原始问题中我的示例的更新：https://jsfiddle.net/7163osn2/5/

W3 HTML标记reference

AngularJS：ng-form + ng-repeat-start

1 个答案: