Angularjs形成嵌套NG重複

嗨場我有嵌套表單字段這樣Angularjs形成嵌套NG重複

<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的所有字段都會填充相同的值。我該如何處理？感謝您的任何幫助和建議

來源

2017-02-14 sanu

有一個複選框或單選按鈕，並根據它做任何操作。 –

輸入需要在窗體中的唯一名稱。

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

來源

2017-02-14 09:53:08

是確切的輸入需要是唯一的，但我們如何使這個獨特我不認爲名稱=「外部_ {{$索引}}」將工作，我們必須使模型獨特不是名稱 – sanu

但我個人儘量避免這種提交給服務器。如果你有很多行並且服務器由於某種原因無法處理它，你需要將錯誤映射到每一行。從理論上講，您可能會在頁面中看到很多錯誤消息，只會讓最終用戶產生混淆/嚇唬。你可不要只顯示數據，並在每一行添加編輯鏈接/按鈕，打開編輯表格 –

我不認爲給一個唯一的ID將解決問題。將每行綁定一個唯一的'scope'變量是必需的 –

這個想法是映射每個學生的主題明智的標記與唯一範圍變量。爲每個學生保存一系列外部和內部標記。我做你的學生反對與此類似：

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

的代碼沒有進行測試。這只是給你一個這個問題如何解決的想法

來源

2017-02-14 10:13:32

答案編號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 
}

來源

2017-02-14 11:07:16

Angularjs形成嵌套NG重複

回答

相關問題