Question

您好我已经使用select选项动态添加表单字段。我想要的是禁用新添加的字段中以前选择的选项。我的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 );
      });
  }

Angularjs动态表单字段，选择选项禁用已选择的选项

1 个答案: