angularjs dynamic add option field with disable previous selected option

Question

Hi I am adding Dynamically form fields like this

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

Each time a user clicks on Add Student button the form field added but how do i disable the previous selected option in a select element.
Thank you for your any help and suggestions

Charlie Ng · Answer 1 · 2017-02-10T09:42:40.910

didn't fully test or optimize it, but this is something you can do.

add track by $index in ng-repeat and add ng-disabled in the select tag with

<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 is to prevent the first field from being disabled

=========================================================================== updated answer. Instead of using select with ng-options, I chose to use select with ng-repeat option. This was what I tried and not working.

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

The options were able to be disabled. Unfortunately Angular won't let me set the value to ng-model since the option has been disabled. A workaround is to use select with ng-repeat option

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/

hi @Charlie Ng it disabled the previous whole select element. but what I want is disabling the selected student in next added field.for eg if I choose student 'st1' in first option of select element it should be disable in next option list of select element — sanu, Feb 10 '17 at 01:49
exactly that is what i want but it is not working with angularjs 1.6.1 — sanu, Feb 10 '17 at 10:29

angularjs dynamic add option field with disable previous selected option

1 Answers1