How to disable a <option> of select element when using AngularJS ng-options?
Solution 1
One way to do this is, to forget using ng-options
on the select
element, and add the options in with ng-repeat
, then you can add a ng-disabled
check on each option
.
<div ng-app="myapp">
<form ng-controller="ctrl">
<select id="t1" ng-model="curval">
<option ng-repeat="i in options" value="{{i}}" ng-disabled="disabled[i]">{{i}}</option>
</select>
<button ng-click="disabled[curval]=true">disable</button>
</form>
</div>
a minimal controller for testing:
angular.module('myapp',[]).controller("ctrl", function($scope){
$scope.options=['test1','test2','test3','test4','test5'];
$scope.disabled={};
})
Solution 2
From Angular 1.4 :
We can use disable when
in ng-options, for example:
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light', notAnOption: true},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark', notAnOption: true},
{name:'yellow', shade:'light', notAnOption: false}
];
$scope.myColor = $scope.colors[2]; // red
This example have colors grouped by shade, with some disabled:
<select ng-model="myColor" ng-options="color.name group by color.shade disable when color.notAnOption for color in colors"></select>
I got this code from the angular documentation.
Solution 3
You should use ng-disabled
directive http://docs.angularjs.org/api/ng.directive:ngDisabled.
<body ng-app="myApp">
<div ng-controller="myCtrl">
<form class="form-inline">
<div class="form-group">
<select class="form-control" ng-disabled="disableSelect">
<option val="one">First</option>
<option val="two">Second</option>
</select>
</div>
<button class="btn btn-default" ng-click="disableSelect = !disableSelect">
Disable select
</button>
</form>
</div>
</body>
Here you could find the complete example http://jsbin.com/ihOYurO/1/
Solution 4
Solve with version 1.4 https://docs.angularjs.org/api/ng/directive/ngOptions [double check you look for v1.4 documentation]
Solution 5
Probably something like this
<button ng-click='disableSelect=true'></button>
<select ng-disabled='disableSelect'></select>
badaboum
Updated on June 19, 2020Comments
-
badaboum about 4 years
Is there a way to disable an
option
in aselect
element when we populateoptions
with ng-options in AngularJS?Like this: http://www.w3schools.com/tags/att_option_disabled.asp
You can do it by adding
ng-disabled
to each<option>
tag, but is there a way to do it if we are using theng-options
directive in theselect
tag? -
NicolasMoise over 10 yearsYou sure? @luacassus's jsbin example seems to work and he uses the same logic
-
badaboum over 10 years@NicolasMoise yes it si working absolutly well but i need to disable the option and not the select ? any idea ?
-
badaboum over 10 years@NicolasMoise need to edit the <select ng-disabled='disableSelect'></select>
-
badaboum over 10 yearscool example i had the same in my application but what i want is to disable the options inside the select and not the select ? Capiché ?
-
NicolasMoise over 10 yearsWell this is very easy if you use ng-options instead of manually typing out the option tags.In your controller, you'll have an array containing the options of your select (their value, label, etc...) then just write a function that removes elements from that array and call it when you press the button.
-
towr over 10 years@NicolasMoise Ah, I made a typo in my jsfiddle myself which caused it to fail, lol, that's ironic.
-
NicolasMoise over 10 years@badaboum yea that wasn't very clear at all in your question, write better questions and you'll get better answers.
-
badaboum over 10 years@NicolasMoise i'm not a native English speaker ! peace
-
NicolasMoise over 10 years@badaboum no problem. I think what you actually meant to say was a great question. I just want other people to be able to understand it and link to it in the future as well. It's kind of the point of this website.
-
NicolasMoise over 10 yearsYea I agree with @towr, I don't see a solution using ng-options in the select tag. I like this implementation it's clean and easy to understand.
-
Pakman over 9 yearsIt looks like Angular 1.4's ngOptions will allow
label disable when disable for ...
-
Backer about 8 yearsThis is the best solution, but one thing worth pointing out is that it requires Angular 1.4 or above as @Fulup mentions. :)
-
Diksha over 5 years@towr the solution works well for single dropdown, but what if we have multiple dropdowns populated from same single json? As in my case the option selected in one dropdown is disabled but not reflected in other dropdowns...
-
towr over 5 yearsI think it should work if the lists use the same scope, so that might be the issue. One option is to put the options-list in the
$root
(probably not the nicest way to do it): jsfiddle.net/2dsoh7xq