角JS验证不工作按预期

Question

我有一个表，在我所用ng-repeat="cancellationPercentData in cancellationPercent"

这个tr标签里面重复<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关闭T之前正好结束股份公司。

但是当我在浏览器中打开上面的代码并检查时，它显示的方式不同，表单标签打开和关闭时没有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无效&的内容会从表扔出去。在这里你应该考虑使用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