How can I disable to select the particular option from Angular JS dropdown?

Question

I want to disable a particular option from AngularJS dropdown.

It should be listed in the dropdown but should not allow it to be selected. So i need to disable it.

MyFile.tpl.html

<select class="form-control" ng-model="selectedFruits" 
        ng-options="fruit as fruit.name for fruit in fruits">
</select>

MyController.js

$scope.fruits = [{'name': 'apple', 'price': 100},{'name': 'guava', 'price': 30},
                 {'name': 'orange', 'price': 60},{'name': 'mango', 'price': 50},
                 {'name': 'banana', 'price': 45},{'name': 'cherry', 'price': 120}];

Here all the fruit names should be listed in the dropdown but mango and cherry should be disabled and should not allow the user to select it.

Is it possible? If possible, please let me know the solution please.

Answer 1

select options are disabled with disabled attribute. Since ng-options doesn't support disabling, you'll have to generate options within ng-repeat and set ng-disabled based on requirements.

Template:

<select class="form-control" ng-model="selectedFruits">
    <option
        ng-repeat="fruit in fruits"
        ng-disabled="disabledFruits.indexOf(fruit.name) !== -1"
        ng-value="fruit">
         {{fruit.name}}
  </option>
</select>

Inside controller:

$scope.disabledFruits = ["mango", "cherry"]

JSBin.