如何將錯誤消息添加到ng-repeat中進行驗證ng-maxlength？

Question

我有一個簡單的代碼：

<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription"> 

         <div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}> 
          <input class="form-control" name="aDiagnosisName" ng-model="aDiagnosis.Name" ng-disabled="true"> 
         </div> 
         <div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}> 
          <input class="form-control" name="aDiagnosisResult" ng-maxlength="200" ng-model="aDiagnosis.Result" /> 
          <p class="help-block" ng-if="form.aDiagnosisResult.$error.maxlength">Too Large</p> 
         </div> 
</div> 

和使用$ scope.form $有效的生成錯誤消息。 但問題是，因爲每次找到相同的名稱時使用ng-repeat，並且當我想通過單擊按鈕生成第二個列表時，第一個錯誤消息已消失，現在錯誤消息對第二個文本（顯然）起作用。 那麼我怎樣才能動態地生成錯誤消息，所以每一個文本格式都是以ng-repeat的形式出現的，它有它自己的錯誤信息。

Answer 1

您可以在ng-repeat中動態生成name輸入的屬性。例如，您可以輸入$index（或您的對象的ID或任何您想要的）來爲您的輸入生成唯一的name。

<div class="row" ng-repeat="aDiagnosis in diagnosisListForPrescription"> 

    <div class="col-md-4 padding-right-zero" id={{aDiagnosis.rowIndex}}> 
      <input class="form-control" name="aDiagnosisName-{{$index}}" ng-model="aDiagnosis.Name" ng-disabled="true"> 
    </div> 
    <div class="col-md-4 padding-right-zero form-group" show-errors id={{aDiagnosis.rowIndex}}> 
      <input class="form-control" name="aDiagnosisResult-{{$index}}" ng-maxlength="200" ng-model="aDiagnosis.Result" /> 
      <p class="help-block" ng-if="form['aDiagnosisResult-' + $index].$error.maxlength">Too Large</p> 
    </div> 
</div> 

Example on plunker.