0

嗨，我正在添加这样的动态表单字段

<div ng-repeat="exam_student in exam_students">
 <select    
   ng-model="exam_student.student_id" 
   options="students"
   ng-options="student.id as student.name for student in students">
 </select>
 <button type="button" ng-click="removeStudent($index)">-</button>
</div>
<button type="button" ng-click="addStudent()">Add Student</button>

js

$scope.students = [{id: 1, name: 'st1'}, 
                   {id: 2, name: 'st2'}];  

$scope.exam_students = [{}]; 

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

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

每次用户单击“添加学生”按钮时，都会添加表单字段，但我如何禁用选择元素中先前选择的选项。
感谢您的任何帮助和建议

4

1 回答 1

2

没有完全测试或优化它，但这是你可以做的。

在 ng-repeat 中按 $index 添加音轨，并在选择标签中添加 ng-disabled

<div ng-controller='MyController'>
<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.name for student in students"
   ng-disabled="exam_students.length > 1 && exam_students.length > $index + 1">
 </select>
<button type="button" ng-click="removeStudent($index)">-</button>
</div>
<button type="button" ng-click="addStudent()">Add Student</button>
</div>

https://jsfiddle.net/4xfzmuub/

Exam_students.length > 1 是为了防止第一个字段被禁用

==================================================== ==========================更新答案。我没有将 select 与 ng-options 一起使用，而是选择将 select 与 ng-repeat 选项一起使用。这是我尝试过但没有工作的方法。

ng-options="student.id as student.name disable when student.disable for student in students"

这些选项可以被禁用。不幸的是，Angular 不允许我将值设置为 ng-model，因为该选项已被禁用。一种解决方法是使用带有 ng-repeat 选项的 select

html:

<div ng-controller='MyController'>
<div ng-repeat="exam_student in exam_students track by $index">
 <select  ng-model="exam_student.student_id" ng-change="hasChange()">
 <option ng-repeat="student in students" value={{::student.id}} ng-disabled="student.disable">{{::student.name}}</option>
 </select>

 <button type="button" ng-click="removeStudent($index)">-</button>
</div>
<button type="button" ng-click="addStudent()">Add Student</button>
</div>

js：

var app = angular.module('myApp', []);

app.controller('MyController', ['$scope', MyController]);    

function MyController($scope) {

        // I suggest adding an empty object so that we can re-select the options
    $scope.students = [{},{id: 1, name: 'st1', disable: false}, 
                   {id: 2, name: 'st2', disable: false},
                   {id: 3, name: 'st3', disable: false}];  

$scope.exam_students = [{}]; 

$scope.addStudent = function(){  

        $scope.exam_students.push({});
    }

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

$scope.hasChange = function() {
    // using a lookup table, instead of 2 nested loops, for a better performance when the list gets large
    var lookupTable = {};

  // store the student_id in the lookupTable and set it to true
  // worth noting since I am using option tag, student_id will be stored as string instead of number, but it is ok because key in javascript object will be converted to string
  $scope.exam_students.forEach(function(exam_student) {

    lookupTable[exam_student.student_id] = true;  
    // or lookupTable[Number(exam_student.student_id)] = true;
  });

  // loop through the options and if student_id is true/there, set disable accordingly
  $scope.students.forEach(function(student) {
    if(lookupTable[student.id]) {
        student.disable = true;
    }else {
        student.disable = false;
    }
    //or student.disable = lookupTable[student.id];
  });
}
}

https://jsfiddle.net/apop98jt/

于 2017-02-09T19:47:37.253 回答