Question

您好我正在添加像这样的动态表单字段

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

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

Answer 1

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

在ng-repeat中按$ index添加曲目，并使用

在select标记中添加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＆gt; 1是为了防止第一个字段被禁用

=============================================== ============================ 更新的答案。我选择使用带有ng-repeat选项的select，而不是使用带有ng-options的select。这是我尝试过的，而不是工作。

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

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

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/

angularjs动态添加选项字段，禁用先前选择的选项

1 个答案: