如何使用AngularJS从下拉列表中禁用已选择的值？

Question

我想使用ng-options AngularJS从下拉列表中禁用已选择的值。

<select name="fruit" ng-model="selectedFruits" ng-options="fruit as fruit.name for fruit in fruits"></select>
<button ng-click="add()">Add</button>

$scope.selectedFruits = undefined;
$scope.finalSelectedFruits = [];

$scope.fruits = [{'name':'banana', 'color':'green'}, 
                 {'name':'apple', 'color':'red'}, 
                 {'name':'mango', 'color':'yellow'}];

$scope.add = function() {
   $scope.model.finalSelectedFruits.push($scope.selectedFruits);
};

请查看以下图片

您可以看到mango已被选中。如何根据$scope.selectedFruits在新的下拉列表中禁用它。

我不想在 <options></options>

中执行此操作

Answer 1

这是plunker

http://plnkr.co/edit/72q64E0HoDWbQXviRPeg?p=preview

关于ng-change检查值并将ng-disabled设置为true

我同意@maurycy。请遵循ng-options with disabled rows

中给出的自定义指令方法