How to disable a <option> of select element when using AngularJS ng-options?

Asked 8/1, 2014 at 17:35 Answered 26/1, 2016 at 2:52

Solved angularjs angularjs-directive ng-options

Is there a way to disable an option in a select element when we populate options 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 the ng-options directive in the select tag?

Outfit answered 8/1, 2014 at 17:35 Comment(6)

what do you mean by on tag and not on tag? – Beetlebrowed 8/1, 2014 at 17:38

@IlanFrumer on select tag and not on option tag , i have edited my post :) – Outfit 8/1, 2014 at 17:43

Yeah, just do it. It works. – Decoupage 8/1, 2014 at 17:44

@Decoupage what i have is a select box that contains informations from mongoDB database i use the binding like this :

<select class="form-control input-sm"             ng-model="list"             ng-options="value.label for value in lists">  </select>

And i want to disable the selected option but just after clicking on a button – Outfit 8/1, 2014 at 17:46

Possible duplicate of: #16202754 – Straightout 16/9, 2015 at 16:32

github.com/farazshuja/disabled-options – Biggers 30/9, 2015 at 11:2

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.

http://jsfiddle.net/97LP2/

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

Decoupage answered 8/1, 2014 at 18:31 Comment(4)

Yea 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. – Tomcat 8/1, 2014 at 18:38

It looks like Angular 1.4's ngOptions will allow label disable when disable for ... – Mariandi 13/3, 2015 at 20:56

@Decoupage 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... – Pricillaprick 28/2, 2019 at 10:9

I 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 – Decoupage 28/2, 2019 at 16:0

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.

Minneapolis answered 26/1, 2016 at 2:52 Comment(1)

This is the best solution, but one thing worth pointing out is that it requires Angular 1.4 or above as @Fulup mentions. :) – Sidwohl 7/6, 2016 at 9:18

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/

Perretta answered 8/1, 2014 at 17:52 Comment(4)

cool 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é ? – Outfit 8/1, 2014 at 18:11

@Outfit yea that wasn't very clear at all in your question, write better questions and you'll get better answers. – Tomcat 8/1, 2014 at 18:19

@Tomcat i'm not a native English speaker ! peace – Outfit 8/1, 2014 at 18:28

@Outfit 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. – Tomcat 8/1, 2014 at 18:31

Solve with version 1.4 https://docs.angularjs.org/api/ng/directive/ngOptions [double check you look for v1.4 documentation]

Donettedoney answered 28/3, 2015 at 0:19 Comment(0)

Probably something like this

<button ng-click='disableSelect=true'></button>

<select ng-disabled='disableSelect'></select>

Tomcat answered 8/1, 2014 at 17:48 Comment(5)

You sure? @luacassus's jsbin example seems to work and he uses the same logic – Tomcat 8/1, 2014 at 18:2

@Tomcat yes it si working absolutly well but i need to disable the option and not the select ? any idea ? – Outfit 8/1, 2014 at 18:8

@Tomcat need to edit the <select ng-disabled='disableSelect'></select> – Outfit 8/1, 2014 at 18:9

Well 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. – Tomcat 8/1, 2014 at 18:13

@Tomcat Ah, I made a typo in my jsfiddle myself which caused it to fail, lol, that's ironic. – Decoupage 8/1, 2014 at 18:14

Recommended topics

Hot tags