1

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

在这个 tr 标签内，我有一个表单，其名称和 id 通过使用设置$index

看看我下面的代码：

<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 关闭标记之前结束。

但是当我在浏览器中打开上面的代码并检查时，它的显示方式有所不同，表单标签在没有 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>

为什么在浏览器中发生变化？

因此，验证无法正常工作。

请帮忙，提前谢谢:)

4

1 回答 1

2

除了表格中的标签之外，您不能有其他table标签，如果您尝试这样做，它将使您的 html 无效并且该内容将从表格中抛出。在这里你应该考虑使用ng-form标签form。

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

    </tr>
</tbody>

也不ng-show需要（插值）指令，您可以通过连接作为键{{}}来形成复杂的表达式stringobject

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

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

另请参见 Angular 表单在表格中不起作用

于 2017-08-09T07:29:27.153 回答