がHi無効前回選択されたオプション

Question

で動的な追加オプションフィールドをangularjs私はこの

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

たびに追加学生のボタンをユーザーがクリックするフォームフィールドが追加のような動的なフォームフィールドを追加していselect要素で以前に選択したオプションを無効にするにはどうすればよいですか？
ご協力いただきありがとうございました

Answer 1

これは完全にテストまたは最適化されていませんが、これが可能なことです。

exam_students.length> 1は

無効になっているから、最初のフィールドを防ぐためですNGリピートで$インデックスでトラックを追加し、

<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/

でselectタグにNG-無効に追加

=============================================== =============== 更新された回答。 ng-optionsでselectを使用する代わりに、ng-repeatオプションでselectを使用することを選択しました。これは私が試したもので、動作していないものでした。

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

オプションを無効にすることができました。残念ながら、Angularはオプションが無効になっているので、ng-modelに値を設定することはできません。

<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/