将 ng-messages 绑定到 ng-repeat

Question

我正在使用 ng-repeat 来呈现表单的字段集：

<fieldset data-ng-repeat="education in edit_profile.education">
  <div class="row">                              
    <md-input-container class="col-xs-12 col-sm-12 col-lg-6 input-profile">
      <label>University</label>
      <input required="" name="editProfile_StudentUni{{$index}}" ng-model="education.uni">
      <div ng-messages="myProfile['editProfile_StudentUni' + $index].$error">
        <div ng-message="required">This is required.</div>
      </div>
    </md-input-container>
    <md-input-container class="col-xs-12 col-sm-12 col-lg-6 input-profile">
      <label>Course</label>
      <input required="" name="editProfile_StudentCourse{{$index}}" ng-model="education.course">
      <div ng-messages="myProfile['editProfile_StudentCourse' + $index].$error">
        <div ng-message="required">This is required.</div>
      </div>
    </md-input-container>
  </div>
  <div class="row">                              
    <md-input-container class="col-xs-12 col-sm-12 col-lg-4 input-profile">
      <label>Start year</label>
      <input name="editProfile_StudentStartYear{{$index}}" ng-model="education.start_year" required ng-pattern="/^20[0-9]{2}$/" md-maxlength="4">
      <div ng-messages="myProfile['editProfile_StudentStartYear' + $index].$error">
        <div ng-message="required">This is required.</div>
        <div ng-message="pattern" class="my-message">Must be a valid year.</div>
        <div ng-message="md-maxlength">Must be a valid year.</div>
      </div>
    </md-input-container>
    <md-input-container class="col-xs-12 col-sm-12 col-lg-4 input-profile">
      <label>End year</label>
      <input name="editProfile_StudentEndYear{{$index}}" ng-model="education.end_year" ng-pattern="/^20[0-9]{2}$/" md-maxlength="4">
      <div ng-messages="myProfile['editProfile_StudentEndYear' + $index].$error">
        <!-- <div ng-message="required">This is required.</div>i dont have end year required: student may still be doing the course-->
        <div id="error5" class="error-message" ng-show="errorMsg5">{{errorMsg5}}</div>
        <div ng-message="pattern" class="my-message">Must be a valid year.</div>
        <div ng-message="md-maxlength">Must be a valid year.</div>
      </div>
    </md-input-container>
    <md-input-container class="col-xs-12 col-sm-12 col-lg-4 input-profile">
      <label>Average</label>
      <input name="editProfile_StudentAverage{{$index}}" ng-model="education.average" ng-pattern="/^[1-2]{1}[0-9]{1}(\.[0-9]{1,2})?$/" step="0.01" required/>
      <div ng-messages="myProfile['editProfile_StudentAverage' + $index].$error">
        <div id="error4" class="error-message" ng-show="errorMsg4">{{errorMsg4}}</div>
        <div ng-message="required">This is required.</div>
        <div ng-message="pattern" class="my-message">Must be a valid value.</div>
      </div>
    </md-input-container>
  </div>
  <a class="btn remove-info" ng-show="!$first" ng-click="removeEducation(education)">Remove</a>
</fieldset>

问题在于消息仅在 div 的第一个副本上呈现（因为该变量已在控制器中设置）。 对于剩余的副本，输入是红色的，因为没有设置，这是正确的，但没有出现错误信息。

当我检查输入元素时，它会显示

<input name="editProfile_StudentEndYear0"

这是正确的，但是当我检查消息元素时，它会显示

<div ng-messages="myProfile['editProfile_StudentEndYear' + $index].$error"

我在这里看到很多答案说要使用这种方法，但对我来说它不起作用。有什么想法吗？

Answer 1

该语法在这个 plunker 中运行良好：https://plnkr.co/edit/3mTPRAcNmBVHdABMuZEo?p=preview

<form name="myForm" novalidate="">
  <div ng-repeat="fieldSet in fieldSets">

    <input type="text" required="" name="firstName{{$index}}" ng-model="fieldSet.firstName" />
    <div ng-messages="myForm['firstName'+$index].$error">
      <div ng-message="required">
        This field is required
      </div>
    </div>

  </div>
</form>

您使用的是非常旧的 AngularJS 版本吗？