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
 }

Angularjs在嵌套的ng-repeat中形成字段

3 个答案: