嵌套ng-repeat中的AngularJS表单字段

Question

Hi I have nested form field like this

<table>

  <tbody ng-repeat="student in students">    
   <tr>
    <td colspan="3">{{student.sname}}</td>
  </tr>
  <tr>
    <td>Subject</td>
    <td>External Mark</td>
    <td>Internal Mark</td>
  </tr>

  <tr ng-repeat="subject in exam_subjects">
    <td>{{subject.subject_name}}</td>
    <td><input ng-model="subject.student.external_mark"></td>
    <td><input ng-model="subject.student.internal_mark"></td>
  </tr>

 </tbody>

</table>

This is for putting exam marks of subjects for students. It is displaying fine but when I put mark to a subject external_mark/internal_mark all the fields of external_mark/internal_mark of that subject get filled the same value. How do I handle this? Thank you for your any help and suggestions

Answer 1

The input needs a unique name within the form .

<tr ng-repeat="subject in exam_subjects">
    <td>{{subject.subject_name}}</td>
    <td><input name="external_{{$index}}" ng-model="subject.student.external_mark"></td>
    <td><input name="internal_{{$index}}" ng-model="subject.student.internal_mark"></td>
  </tr>

Answer 2

The idea is to map each student's subject wise marks with unique scope variable. For each student save an array of external and internal marks. I make your students object similar to this:

$scope.students=[{
    "sname": "abc",
    "marks": []
}];

$scope.exam_subjects=[{
     "id": "1",
     "subject_name": "Physics"  
     },
     {
     "id": "2",
     "subject_name": "Maths"
     }];

In your view:

<tr ng-repeat="subject in exam_subjects">
<td>{{subject.subject_name}}</td>
<td><input ng-model="student.marks[{{subject.id-1}}].external_mark"></td>
<td><input ng-model="student.marks[{{subject.id-1}}].internal_mark"></td>
</tr>

The code is not tested. It is just to give you an idea of how this problem could be solved

Answer 3

Answer number2. Now that I know what your doing (which was difficult from you initial post) I would recommend you something like this.

NOTE It will only work if you have a dedicated PUT/PATCH function for the single subject.

exam_subjects should be an array. in your controller as $scope.exam_subjects. When you press edit do it something like this.

<tr ng-repeat-start="subject in exam_subjects">
...
<td><button ng-click=onEdit(subject)></button></td>
</tr>
<tr ng-repeat-end="" ng-if="vm.selectedSubject.Id===subject.Id">
<td colspan="">
  //your form that you bind to selectedSubject. add submit and Cancel button. 
</td>
</tr>

in controller.

$scope.onEdit=function(subject){
  $scope.selectedSubject = angular.copy(subject); 
  //need to be a copy if you want to be able to Cancel post. Otherwise Angular will update array element directly
}
$scope.onCancel = function(); 
  $scope.selectedSubject='';
}
$scope.onSubmit = function(subject){
 //your submit code
 }