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

Question

嗨，我有這樣的嵌套表格字段

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

這是為學生設置科目的考試成績。 它顯示得很好，但是當我將標記置於主題external_mark / internal_mark時，該主題的external_mark / internal_mark的所有字段都填充相同的值。 我該如何處理？ 感謝您的幫助和建議

Answer 1

輸入在表單中需要唯一的名稱。

<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

想法是用唯一的范圍變量映射每個學生的主題明智的標記。 為每個學生保存一系列外部和內部標記。 我讓您的學生對此表示反對：

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

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

您認為：

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

該代碼未經測試。 只是為了讓您了解如何解決此問題

Answer 3

答案編號2。 現在，我知道您的工作了（在您最初的帖子中很難做到），我將向您推薦這樣的內容。

注意僅當您對單個主題具有專用的PUT / PATCH功能時，此功能才有效。

exam_subjects應該是一個數組。 在您的控制器中為$ scope.exam_subjects。 當您按編輯時，請執行以下操作。

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

在控制器中。

$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
 }