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












6














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?










share|improve this question
























  • what do you mean by on tag and not on tag?
    – Ilan Frumer
    Jan 8 '14 at 17:38












  • @IlanFrumer on select tag and not on option tag , i have edited my post :)
    – badaboum
    Jan 8 '14 at 17:43










  • Yeah, just do it. It works.
    – towr
    Jan 8 '14 at 17:44










  • @towr 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
    – badaboum
    Jan 8 '14 at 17:46












  • Possible duplicate of: stackoverflow.com/questions/16202254/…
    – jmunsch
    Sep 16 '15 at 16:32
















6














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?










share|improve this question
























  • what do you mean by on tag and not on tag?
    – Ilan Frumer
    Jan 8 '14 at 17:38












  • @IlanFrumer on select tag and not on option tag , i have edited my post :)
    – badaboum
    Jan 8 '14 at 17:43










  • Yeah, just do it. It works.
    – towr
    Jan 8 '14 at 17:44










  • @towr 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
    – badaboum
    Jan 8 '14 at 17:46












  • Possible duplicate of: stackoverflow.com/questions/16202254/…
    – jmunsch
    Sep 16 '15 at 16:32














6












6








6







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?










share|improve this question















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?







angularjs angularjs-directive ng-options






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jun 19 '16 at 8:01









Asim K T

6,20424564




6,20424564










asked Jan 8 '14 at 17:35









badaboum

3631725




3631725












  • what do you mean by on tag and not on tag?
    – Ilan Frumer
    Jan 8 '14 at 17:38












  • @IlanFrumer on select tag and not on option tag , i have edited my post :)
    – badaboum
    Jan 8 '14 at 17:43










  • Yeah, just do it. It works.
    – towr
    Jan 8 '14 at 17:44










  • @towr 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
    – badaboum
    Jan 8 '14 at 17:46












  • Possible duplicate of: stackoverflow.com/questions/16202254/…
    – jmunsch
    Sep 16 '15 at 16:32


















  • what do you mean by on tag and not on tag?
    – Ilan Frumer
    Jan 8 '14 at 17:38












  • @IlanFrumer on select tag and not on option tag , i have edited my post :)
    – badaboum
    Jan 8 '14 at 17:43










  • Yeah, just do it. It works.
    – towr
    Jan 8 '14 at 17:44










  • @towr 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
    – badaboum
    Jan 8 '14 at 17:46












  • Possible duplicate of: stackoverflow.com/questions/16202254/…
    – jmunsch
    Sep 16 '15 at 16:32
















what do you mean by on tag and not on tag?
– Ilan Frumer
Jan 8 '14 at 17:38






what do you mean by on tag and not on tag?
– Ilan Frumer
Jan 8 '14 at 17:38














@IlanFrumer on select tag and not on option tag , i have edited my post :)
– badaboum
Jan 8 '14 at 17:43




@IlanFrumer on select tag and not on option tag , i have edited my post :)
– badaboum
Jan 8 '14 at 17:43












Yeah, just do it. It works.
– towr
Jan 8 '14 at 17:44




Yeah, just do it. It works.
– towr
Jan 8 '14 at 17:44












@towr 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
– badaboum
Jan 8 '14 at 17:46






@towr 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
– badaboum
Jan 8 '14 at 17:46














Possible duplicate of: stackoverflow.com/questions/16202254/…
– jmunsch
Sep 16 '15 at 16:32




Possible duplicate of: stackoverflow.com/questions/16202254/…
– jmunsch
Sep 16 '15 at 16:32












5 Answers
5






active

oldest

votes


















13














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





share|improve this answer























  • 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.
    – NicolasMoise
    Jan 8 '14 at 18:38








  • 2




    It looks like Angular 1.4's ngOptions will allow label disable when disable for ...
    – Pakman
    Mar 13 '15 at 20:56



















8














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.






share|improve this answer



















  • 2




    This is the best solution, but one thing worth pointing out is that it requires Angular 1.4 or above as @Fulup mentions. :)
    – Backer
    Jun 7 '16 at 9:18






  • 1




    Excellent solution, works like a charm.
    – Mindsect Team
    Nov 8 '17 at 18:31



















2














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/






share|improve this answer





















  • 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é ?
    – badaboum
    Jan 8 '14 at 18:11










  • @badaboum yea that wasn't very clear at all in your question, write better questions and you'll get better answers.
    – NicolasMoise
    Jan 8 '14 at 18:19










  • @NicolasMoise i'm not a native English speaker ! peace
    – badaboum
    Jan 8 '14 at 18:28






  • 2




    @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
    Jan 8 '14 at 18:31





















2














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






share|improve this answer





























    1














    Probably something like this



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

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





    share|improve this answer























    • You sure? @luacassus's jsbin example seems to work and he uses the same logic
      – NicolasMoise
      Jan 8 '14 at 18:02










    • @NicolasMoise yes it si working absolutly well but i need to disable the option and not the select ? any idea ?
      – badaboum
      Jan 8 '14 at 18:08










    • @NicolasMoise need to edit the <select ng-disabled='disableSelect'></select>
      – badaboum
      Jan 8 '14 at 18:09










    • 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.
      – NicolasMoise
      Jan 8 '14 at 18:13












    • @NicolasMoise Ah, I made a typo in my jsfiddle myself which caused it to fail, lol, that's ironic.
      – towr
      Jan 8 '14 at 18:14











    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f21002616%2fhow-to-disable-a-option-of-select-element-when-using-angularjs-ng-options%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    5 Answers
    5






    active

    oldest

    votes








    5 Answers
    5






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    13














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





    share|improve this answer























    • 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.
      – NicolasMoise
      Jan 8 '14 at 18:38








    • 2




      It looks like Angular 1.4's ngOptions will allow label disable when disable for ...
      – Pakman
      Mar 13 '15 at 20:56
















    13














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





    share|improve this answer























    • 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.
      – NicolasMoise
      Jan 8 '14 at 18:38








    • 2




      It looks like Angular 1.4's ngOptions will allow label disable when disable for ...
      – Pakman
      Mar 13 '15 at 20:56














    13












    13








    13






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





    share|improve this answer














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






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Jun 19 '16 at 8:18









    DeadAlready

    2,5431215




    2,5431215










    answered Jan 8 '14 at 18:31









    towr

    3,50031423




    3,50031423












    • 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.
      – NicolasMoise
      Jan 8 '14 at 18:38








    • 2




      It looks like Angular 1.4's ngOptions will allow label disable when disable for ...
      – Pakman
      Mar 13 '15 at 20:56


















    • 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.
      – NicolasMoise
      Jan 8 '14 at 18:38








    • 2




      It looks like Angular 1.4's ngOptions will allow label disable when disable for ...
      – Pakman
      Mar 13 '15 at 20:56
















    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.
    – NicolasMoise
    Jan 8 '14 at 18:38






    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.
    – NicolasMoise
    Jan 8 '14 at 18:38






    2




    2




    It looks like Angular 1.4's ngOptions will allow label disable when disable for ...
    – Pakman
    Mar 13 '15 at 20:56




    It looks like Angular 1.4's ngOptions will allow label disable when disable for ...
    – Pakman
    Mar 13 '15 at 20:56













    8














    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.






    share|improve this answer



















    • 2




      This is the best solution, but one thing worth pointing out is that it requires Angular 1.4 or above as @Fulup mentions. :)
      – Backer
      Jun 7 '16 at 9:18






    • 1




      Excellent solution, works like a charm.
      – Mindsect Team
      Nov 8 '17 at 18:31
















    8














    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.






    share|improve this answer



















    • 2




      This is the best solution, but one thing worth pointing out is that it requires Angular 1.4 or above as @Fulup mentions. :)
      – Backer
      Jun 7 '16 at 9:18






    • 1




      Excellent solution, works like a charm.
      – Mindsect Team
      Nov 8 '17 at 18:31














    8












    8








    8






    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.






    share|improve this answer














    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.







    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Jun 19 '16 at 8:27









    Asim K T

    6,20424564




    6,20424564










    answered Jan 26 '16 at 2:52









    Nicolas Del Valle

    544614




    544614








    • 2




      This is the best solution, but one thing worth pointing out is that it requires Angular 1.4 or above as @Fulup mentions. :)
      – Backer
      Jun 7 '16 at 9:18






    • 1




      Excellent solution, works like a charm.
      – Mindsect Team
      Nov 8 '17 at 18:31














    • 2




      This is the best solution, but one thing worth pointing out is that it requires Angular 1.4 or above as @Fulup mentions. :)
      – Backer
      Jun 7 '16 at 9:18






    • 1




      Excellent solution, works like a charm.
      – Mindsect Team
      Nov 8 '17 at 18:31








    2




    2




    This is the best solution, but one thing worth pointing out is that it requires Angular 1.4 or above as @Fulup mentions. :)
    – Backer
    Jun 7 '16 at 9:18




    This is the best solution, but one thing worth pointing out is that it requires Angular 1.4 or above as @Fulup mentions. :)
    – Backer
    Jun 7 '16 at 9:18




    1




    1




    Excellent solution, works like a charm.
    – Mindsect Team
    Nov 8 '17 at 18:31




    Excellent solution, works like a charm.
    – Mindsect Team
    Nov 8 '17 at 18:31











    2














    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/






    share|improve this answer





















    • 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é ?
      – badaboum
      Jan 8 '14 at 18:11










    • @badaboum yea that wasn't very clear at all in your question, write better questions and you'll get better answers.
      – NicolasMoise
      Jan 8 '14 at 18:19










    • @NicolasMoise i'm not a native English speaker ! peace
      – badaboum
      Jan 8 '14 at 18:28






    • 2




      @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
      Jan 8 '14 at 18:31


















    2














    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/






    share|improve this answer





















    • 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é ?
      – badaboum
      Jan 8 '14 at 18:11










    • @badaboum yea that wasn't very clear at all in your question, write better questions and you'll get better answers.
      – NicolasMoise
      Jan 8 '14 at 18:19










    • @NicolasMoise i'm not a native English speaker ! peace
      – badaboum
      Jan 8 '14 at 18:28






    • 2




      @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
      Jan 8 '14 at 18:31
















    2












    2








    2






    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/






    share|improve this answer












    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/







    share|improve this answer












    share|improve this answer



    share|improve this answer










    answered Jan 8 '14 at 17:52









    luacassus

    5,36123457




    5,36123457












    • 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é ?
      – badaboum
      Jan 8 '14 at 18:11










    • @badaboum yea that wasn't very clear at all in your question, write better questions and you'll get better answers.
      – NicolasMoise
      Jan 8 '14 at 18:19










    • @NicolasMoise i'm not a native English speaker ! peace
      – badaboum
      Jan 8 '14 at 18:28






    • 2




      @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
      Jan 8 '14 at 18:31




















    • 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é ?
      – badaboum
      Jan 8 '14 at 18:11










    • @badaboum yea that wasn't very clear at all in your question, write better questions and you'll get better answers.
      – NicolasMoise
      Jan 8 '14 at 18:19










    • @NicolasMoise i'm not a native English speaker ! peace
      – badaboum
      Jan 8 '14 at 18:28






    • 2




      @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
      Jan 8 '14 at 18:31


















    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é ?
    – badaboum
    Jan 8 '14 at 18:11




    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é ?
    – badaboum
    Jan 8 '14 at 18:11












    @badaboum yea that wasn't very clear at all in your question, write better questions and you'll get better answers.
    – NicolasMoise
    Jan 8 '14 at 18:19




    @badaboum yea that wasn't very clear at all in your question, write better questions and you'll get better answers.
    – NicolasMoise
    Jan 8 '14 at 18:19












    @NicolasMoise i'm not a native English speaker ! peace
    – badaboum
    Jan 8 '14 at 18:28




    @NicolasMoise i'm not a native English speaker ! peace
    – badaboum
    Jan 8 '14 at 18:28




    2




    2




    @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
    Jan 8 '14 at 18:31






    @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
    Jan 8 '14 at 18:31













    2














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






    share|improve this answer


























      2














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






      share|improve this answer
























        2












        2








        2






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






        share|improve this answer












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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Mar 28 '15 at 0:19









        Fulup

        370113




        370113























            1














            Probably something like this



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

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





            share|improve this answer























            • You sure? @luacassus's jsbin example seems to work and he uses the same logic
              – NicolasMoise
              Jan 8 '14 at 18:02










            • @NicolasMoise yes it si working absolutly well but i need to disable the option and not the select ? any idea ?
              – badaboum
              Jan 8 '14 at 18:08










            • @NicolasMoise need to edit the <select ng-disabled='disableSelect'></select>
              – badaboum
              Jan 8 '14 at 18:09










            • 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.
              – NicolasMoise
              Jan 8 '14 at 18:13












            • @NicolasMoise Ah, I made a typo in my jsfiddle myself which caused it to fail, lol, that's ironic.
              – towr
              Jan 8 '14 at 18:14
















            1














            Probably something like this



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

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





            share|improve this answer























            • You sure? @luacassus's jsbin example seems to work and he uses the same logic
              – NicolasMoise
              Jan 8 '14 at 18:02










            • @NicolasMoise yes it si working absolutly well but i need to disable the option and not the select ? any idea ?
              – badaboum
              Jan 8 '14 at 18:08










            • @NicolasMoise need to edit the <select ng-disabled='disableSelect'></select>
              – badaboum
              Jan 8 '14 at 18:09










            • 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.
              – NicolasMoise
              Jan 8 '14 at 18:13












            • @NicolasMoise Ah, I made a typo in my jsfiddle myself which caused it to fail, lol, that's ironic.
              – towr
              Jan 8 '14 at 18:14














            1












            1








            1






            Probably something like this



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

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





            share|improve this answer














            Probably something like this



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

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






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Jan 8 '14 at 18:02

























            answered Jan 8 '14 at 17:48









            NicolasMoise

            5,830104064




            5,830104064












            • You sure? @luacassus's jsbin example seems to work and he uses the same logic
              – NicolasMoise
              Jan 8 '14 at 18:02










            • @NicolasMoise yes it si working absolutly well but i need to disable the option and not the select ? any idea ?
              – badaboum
              Jan 8 '14 at 18:08










            • @NicolasMoise need to edit the <select ng-disabled='disableSelect'></select>
              – badaboum
              Jan 8 '14 at 18:09










            • 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.
              – NicolasMoise
              Jan 8 '14 at 18:13












            • @NicolasMoise Ah, I made a typo in my jsfiddle myself which caused it to fail, lol, that's ironic.
              – towr
              Jan 8 '14 at 18:14


















            • You sure? @luacassus's jsbin example seems to work and he uses the same logic
              – NicolasMoise
              Jan 8 '14 at 18:02










            • @NicolasMoise yes it si working absolutly well but i need to disable the option and not the select ? any idea ?
              – badaboum
              Jan 8 '14 at 18:08










            • @NicolasMoise need to edit the <select ng-disabled='disableSelect'></select>
              – badaboum
              Jan 8 '14 at 18:09










            • 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.
              – NicolasMoise
              Jan 8 '14 at 18:13












            • @NicolasMoise Ah, I made a typo in my jsfiddle myself which caused it to fail, lol, that's ironic.
              – towr
              Jan 8 '14 at 18:14
















            You sure? @luacassus's jsbin example seems to work and he uses the same logic
            – NicolasMoise
            Jan 8 '14 at 18:02




            You sure? @luacassus's jsbin example seems to work and he uses the same logic
            – NicolasMoise
            Jan 8 '14 at 18:02












            @NicolasMoise yes it si working absolutly well but i need to disable the option and not the select ? any idea ?
            – badaboum
            Jan 8 '14 at 18:08




            @NicolasMoise yes it si working absolutly well but i need to disable the option and not the select ? any idea ?
            – badaboum
            Jan 8 '14 at 18:08












            @NicolasMoise need to edit the <select ng-disabled='disableSelect'></select>
            – badaboum
            Jan 8 '14 at 18:09




            @NicolasMoise need to edit the <select ng-disabled='disableSelect'></select>
            – badaboum
            Jan 8 '14 at 18:09












            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.
            – NicolasMoise
            Jan 8 '14 at 18:13






            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.
            – NicolasMoise
            Jan 8 '14 at 18:13














            @NicolasMoise Ah, I made a typo in my jsfiddle myself which caused it to fail, lol, that's ironic.
            – towr
            Jan 8 '14 at 18:14




            @NicolasMoise Ah, I made a typo in my jsfiddle myself which caused it to fail, lol, that's ironic.
            – towr
            Jan 8 '14 at 18:14


















            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f21002616%2fhow-to-disable-a-option-of-select-element-when-using-angularjs-ng-options%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Berounka

            Sphinx de Gizeh

            Different font size/position of beamer's navigation symbols template's content depending on regular/plain...