AngularJS：ng-form + ng-repeat-start

我有一個表ng-repeat-start，它可以爲數組中的每個項目生成4行。AngularJS：ng-form + ng-repeat-start

對於每個ng-repeat，我將創建一個ng-form來驗證每個項目並逐個項目地生成錯誤消息。

構建HTML的正確方法是什麼，以便可以從ng-repeat-start和ng-repeat-end之間生成的所有行訪問ng-form？

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

來源

2016-05-23 Jack Allen

「這樣的NG-形式是所有行的訪問」，你想達到什麼樣的？ – shershen

@shershen我已經添加了一個例子。我想使用額外的行來保存關於出現在前幾行的錯誤的信息。 –

''評論錯誤：{{itemForm | json}}'''在這些行中可用不是嗎？ – shershen

根據this它是有效的具有table的內的多個tbody元件。所有td細胞仍然會像他們通常那樣與其父母th細胞匹配。

它也消除了對ng-repeat-start的需求，所以您可以回到使用標準ng-repeat。

我的最新消息，例如在原來的問題：https://jsfiddle.net/7163osn2/5/

W3 HTML標記reference

來源

2016-05-24 09:16:25

AngularJS：ng-form + ng-repeat-start

回答

相關問題