0

I want to disable the already selected value from the dropdown using 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);
};

Please look at the following image

enter image description here

You can see mango is already selected. How can disable it in the new dropdown based on the $scope.selectedFruits.

I don't want to do this within <options></options>

Community
  • 1
  • 1
prince
  • 601
  • 6
  • 15
  • 30
  • I'm not sure about disabling a single select-option item, but why not remove it from the array, thus removing it from the options? – jnthnjns Mar 03 '14 at 14:00
  • What would a `disabled` option look like? Do you want the value filtered out? – Davin Tryon Mar 03 '14 at 14:00
  • 1
    I'm afraid there is no straight approach to achieve this but in this topic http://stackoverflow.com/questions/16202254/ng-options-with-disabled-rows you can find a solutions that can work for you – maurycy Mar 03 '14 at 14:28

1 Answers1

0

Here is the plunker

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

on ng-change check the value and make ng-disabled to true

I concur with @maurycy. Please follow the custom directive approach, given in ng-options with disabled rows

Community
  • 1
  • 1
madhured
  • 443
  • 2
  • 8