角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