Angularjs動態表單域與選擇選項已禁用已選擇選項

Question

嗨我有動態添加選擇選項的表單域。我想要的是在新添加的字段中禁用先前選擇的選項。 我的HTML是這樣

<div ng-repeat="exam_student in exam_students track by $index"> 

    <select 
    ng-model="exam_student.student_id" 
    options="students" 
    ng-options="student.id as student.sname for student in students"> 
    </select> 
    <button type="button" ng-click="removeStudent($index)">-</button> 

</div> 

<button type="button" ng-click="addStudent()">+</button> 

和我的JS是

$scope.exam_students = [{}]; 
$scope.addStudent = function(){ 
    $scope.exam_students.push({}); 
} 

$scope.removeStudent = function(index){ 
    $scope.exam_students.splice(index,1); 
} 

這裏是Plunker plnkr.co/edit/VOZrqIos54IcunBTAwat

感謝您的任何幫助和建議。

Answer 1

試試這個小提琴

https://jsfiddle.net/athulnair/c3Lorjrx/

$scope.filteredstudents =angular.copy($scope.students) 
    $scope.addStudent = function(name){ 
     $scope.exam_students.push({"id":name,"sname":name}); 
    debugger; 
    var index = $scope.filteredstudents.findIndex(item => item.id === name); 
    $scope.filteredstudents.splice(index, 1); 

    } 

    $scope.removeStudent = function(name){ 
    var examstudentindex = $scope.exam_students.findIndex(item => item.id === name); 
     $scope.exam_students.splice(examstudentindex,1); 
    var index = $scope.students.findIndex(item => item.id === name); 
    $scope.filteredstudents.push($scope.students[index]); 
    } 

否則，你可以調用$scope.filterStudents();它會選擇過濾您的陣列

$scope.filterStudents = function(){ 
     $scope.filteredstudents = $scope.students.filter(function(el) { 
     return !$scope.exam_students.map(i=>(i.id)).includes(el.id); 
     }); 
    }