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); 
     }); 
    }