ng-repeat中表单的角度js验证未按预期工作

Question

我有一张桌子，我使用<tr>重复了ng-repeat="cancellationPercentData in cancellationPercent"标记

在这个tr标签中，我有一个使用$index

设置名称和ID的表单

请看下面的代码：

<tbody>
    <tr  ng-repeat="cancellationPercentData in cancellationPercent">
        <form name="{{ $index }}editPercentageForm" id="{{ $index }}editPercentageForm" novalidate>
        <td class="form-group">
            <input type="number" name="{{ $index }}editFromHours" ng-model="cancellationPercentData.fromHours" class="form-control" ng-disabled="disableField" id="{{ $index }}fromHours" required/>
            <p ng-show="{{ $index }}editPercentageForm.{{ $index }}editFromHours.$touched && {{ $index }}editPercentageForm.{{ $index }}editFromHours.$invalid" class="text-danger">This field is required</p>
        <td class="form-group">
            <input type="number" name="{{ $index }}edittoHours" ng-model="cancellationPercentData.toHours" class="form-control" ng-disabled="disableField" id="{{ $index }}toHours" required/>
            <p ng-show="{{ $index }}editPercentageForm.{{ $index }}edittoHours.$touched && {{ $index }}editPercentageForm.{{ $index }}edittoHours.$invalid">This field is required</p>
            <p ng-show="{{ $index }}edittoHours>={{ $index }}editFromHours" class="text-danger">To Hours should not be more than to Hours</p>
         </td>
        <td class="form-group">
            <input type="text" name="{{ $index }}editPer" ng-model="cancellationPercentData.percentage" class="form-control" ng-disabled="disableField" id="{{ $index }}percentage" required/>
            <p ng-show="{{ $index }}editPercentageForm.{{ $index }}editPer.$touched && {{ $index }}editPercentageForm.{{ $index }}editPer.$invalid">This field is required</p>
        </td>
        <td class="form-group">
            <button class="btn btn-success col-xs-12" type="button" ng-click="disableField = false" ng-show="disableField" style="margin-bottom: 1%;">Edit</button>
            <button class="btn btn-success col-xs-12" type="submit" style="margin-bottom: 1%;"  ng-disabled="{{ $index }}editPercentageForm.$invalid" ng-click="updateCancellations(cancellationPercentData, $index+'fromHours', $index+'toHours', $index+'percentage')" ng-show="disableField == false">Update</button>
            <button class="btn btn-primary col-xs-12" type="button" ng-click="deleteCancellations(cancellationPercentData)" style="margin-bottom: 1%;">Delete</button>
        </td>
        </form>
    </tr>
    </tbody>

tr正在重复，但tr内的表格应该在tr标签之后立即开始，并且应该在tr close标签之前结束。

但是当我在浏览器中打开上面的代码并进行检查时，它的显示方式不同，表单标签在没有td标签的情况下打开和关闭。关闭表单后，就会启动tg标记。

这是我在浏览时对浏览器进行更改的方式：

<tbody>
    <!-- ngRepeat: cancellationPercentData in cancellationPercent --><tr ng-repeat="cancellationPercentData in cancellationPercent" class="ng-scope">
        <form name="0editPercentageForm" id="0editPercentageForm" novalidate="" class="ng-pristine ng-valid"></form>
        <td class="form-group">
            <input type="number" name="0editFromHours" ng-model="cancellationPercentData.fromHours" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="0fromHours" required="" disabled="disabled">
            <p ng-show="0editPercentageForm.0editFromHours.$touched &amp;&amp; 0editPercentageForm.0editFromHours.$invalid" class="text-danger">This field is required</p>
        </td><td class="form-group">
            <input type="number" name="0edittoHours" ng-model="cancellationPercentData.toHours" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="0toHours" required="" disabled="disabled">
            <p ng-show="0editPercentageForm.0edittoHours.$touched &amp;&amp; 0editPercentageForm.0edittoHours.$invalid">This field is required</p>
            <p ng-show="0edittoHours>=0editFromHours" class="text-danger">To Hours should not be more than to Hours</p>
         </td>
        <td class="form-group">
            <input type="text" name="0editPer" ng-model="cancellationPercentData.percentage" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="0percentage" required="" disabled="disabled">
            <p ng-show="0editPercentageForm.0editPer.$touched &amp;&amp; 0editPercentageForm.0editPer.$invalid">This field is required</p>
        </td>
        <td class="form-group">
            <button class="btn btn-success col-xs-12" type="button" ng-click="disableField = false" ng-show="disableField" style="margin-bottom: 1%;">Edit</button>
            <button class="btn btn-success col-xs-12 ng-hide" type="submit" style="margin-bottom: 1%;" ng-disabled="0editPercentageForm.$invalid" ng-click="updateCancellations(cancellationPercentData, $index+'fromHours', $index+'toHours', $index+'percentage')" ng-show="disableField == false">Update</button>
            <button class="btn btn-primary col-xs-12" type="button" ng-click="deleteCancellations(cancellationPercentData)" style="margin-bottom: 1%;">Delete</button>
        </td>

    </tr><!-- end ngRepeat: cancellationPercentData in cancellationPercent --><tr ng-repeat="cancellationPercentData in cancellationPercent" class="ng-scope">
        <form name="1editPercentageForm" id="1editPercentageForm" novalidate="" class="ng-pristine ng-valid"></form>
        <td class="form-group">
            <input type="number" name="1editFromHours" ng-model="cancellationPercentData.fromHours" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="1fromHours" required="" disabled="disabled">
            <p ng-show="1editPercentageForm.1editFromHours.$touched &amp;&amp; 1editPercentageForm.1editFromHours.$invalid" class="text-danger">This field is required</p>
        </td><td class="form-group">
            <input type="number" name="1edittoHours" ng-model="cancellationPercentData.toHours" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="1toHours" required="" disabled="disabled">
            <p ng-show="1editPercentageForm.1edittoHours.$touched &amp;&amp; 1editPercentageForm.1edittoHours.$invalid">This field is required</p>
            <p ng-show="1edittoHours>=1editFromHours" class="text-danger">To Hours should not be more than to Hours</p>
         </td>
        <td class="form-group">
            <input type="text" name="1editPer" ng-model="cancellationPercentData.percentage" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="1percentage" required="" disabled="disabled">
            <p ng-show="1editPercentageForm.1editPer.$touched &amp;&amp; 1editPercentageForm.1editPer.$invalid">This field is required</p>
        </td>
        <td class="form-group">
            <button class="btn btn-success col-xs-12" type="button" ng-click="disableField = false" ng-show="disableField" style="margin-bottom: 1%;">Edit</button>
            <button class="btn btn-success col-xs-12 ng-hide" type="submit" style="margin-bottom: 1%;" ng-disabled="1editPercentageForm.$invalid" ng-click="updateCancellations(cancellationPercentData, $index+'fromHours', $index+'toHours', $index+'percentage')" ng-show="disableField == false">Update</button>
            <button class="btn btn-primary col-xs-12" type="button" ng-click="deleteCancellations(cancellationPercentData)" style="margin-bottom: 1%;">Delete</button>
        </td>

    </tr><!-- end ngRepeat: cancellationPercentData in cancellationPercent --><tr ng-repeat="cancellationPercentData in cancellationPercent" class="ng-scope">
        <form name="2editPercentageForm" id="2editPercentageForm" novalidate="" class="ng-pristine ng-valid"></form>
        <td class="form-group">
            <input type="number" name="2editFromHours" ng-model="cancellationPercentData.fromHours" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="2fromHours" required="" disabled="disabled">
            <p ng-show="2editPercentageForm.2editFromHours.$touched &amp;&amp; 2editPercentageForm.2editFromHours.$invalid" class="text-danger">This field is required</p>
        </td><td class="form-group">
            <input type="number" name="2edittoHours" ng-model="cancellationPercentData.toHours" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="2toHours" required="" disabled="disabled">
            <p ng-show="2editPercentageForm.2edittoHours.$touched &amp;&amp; 2editPercentageForm.2edittoHours.$invalid">This field is required</p>
            <p ng-show="2edittoHours>=2editFromHours" class="text-danger">To Hours should not be more than to Hours</p>
         </td>
        <td class="form-group">
            <input type="text" name="2editPer" ng-model="cancellationPercentData.percentage" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="2percentage" required="" disabled="disabled">
            <p ng-show="2editPercentageForm.2editPer.$touched &amp;&amp; 2editPercentageForm.2editPer.$invalid">This field is required</p>
        </td>
        <td class="form-group">
            <button class="btn btn-success col-xs-12" type="button" ng-click="disableField = false" ng-show="disableField" style="margin-bottom: 1%;">Edit</button>
            <button class="btn btn-success col-xs-12 ng-hide" type="submit" style="margin-bottom: 1%;" ng-disabled="2editPercentageForm.$invalid" ng-click="updateCancellations(cancellationPercentData, $index+'fromHours', $index+'toHours', $index+'percentage')" ng-show="disableField == false">Update</button>
            <button class="btn btn-primary col-xs-12" type="button" ng-click="deleteCancellations(cancellationPercentData)" style="margin-bottom: 1%;">Delete</button>
        </td>

    </tr><!-- end ngRepeat: cancellationPercentData in cancellationPercent --><tr ng-repeat="cancellationPercentData in cancellationPercent" class="ng-scope">
        <form name="3editPercentageForm" id="3editPercentageForm" novalidate="" class="ng-pristine ng-valid"></form>
        <td class="form-group">
            <input type="number" name="3editFromHours" ng-model="cancellationPercentData.fromHours" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="3fromHours" required="" disabled="disabled">
            <p ng-show="3editPercentageForm.3editFromHours.$touched &amp;&amp; 3editPercentageForm.3editFromHours.$invalid" class="text-danger">This field is required</p>
        </td><td class="form-group">
            <input type="number" name="3edittoHours" ng-model="cancellationPercentData.toHours" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="3toHours" required="" disabled="disabled">
            <p ng-show="3editPercentageForm.3edittoHours.$touched &amp;&amp; 3editPercentageForm.3edittoHours.$invalid">This field is required</p>
            <p ng-show="3edittoHours>=3editFromHours" class="text-danger">To Hours should not be more than to Hours</p>
         </td>
        <td class="form-group">
            <input type="text" name="3editPer" ng-model="cancellationPercentData.percentage" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-disabled="disableField" id="3percentage" required="" disabled="disabled">
            <p ng-show="3editPercentageForm.3editPer.$touched &amp;&amp; 3editPercentageForm.3editPer.$invalid">This field is required</p>
        </td>
        <td class="form-group">
            <button class="btn btn-success col-xs-12" type="button" ng-click="disableField = false" ng-show="disableField" style="margin-bottom: 1%;">Edit</button>
            <button class="btn btn-success col-xs-12 ng-hide" type="submit" style="margin-bottom: 1%;" ng-disabled="3editPercentageForm.$invalid" ng-click="updateCancellations(cancellationPercentData, $index+'fromHours', $index+'toHours', $index+'percentage')" ng-show="disableField == false">Update</button>
            <button class="btn btn-primary col-xs-12" type="button" ng-click="deleteCancellations(cancellationPercentData)" style="margin-bottom: 1%;">Delete</button>
        </td>

    </tr><!-- end ngRepeat: cancellationPercentData in cancellationPercent -->
    </tbody>

为什么在浏览器中更改？

因此，验证无法正常运行。

请提前帮助，请提供帮助：）

Answer 1

您在表格中不能使用table标记，如果您尝试这样做，则会导致您的HTML无效＆amp;该内容将从表中抛出。在这里，您应该考虑使用ng-form form标记。

<tbody>
    <tr ng-repeat="cancellationPercentData in cancellationPercent" ng-form="{{ $index}}editPercentageForm">

    </tr>
</tbody>

同样ng-show不需要{{}}（插值）指令，您可以通过将string连接为object

的键来形成复杂表达式

ng-show="this.[$index+ 'editPercentageForm'][$index+'editFromHours'].$touched && 
         this.[$index+ 'editPercentageForm'][$index+'editFromHours'].$invalid"

同样纠正你的所有其他表达。

另见 Angular form not working in a table