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?
angularjs angularjs-directive ng-options
edited Jun 19 '16 at 8:01
Asim K T
6,39824664
asked Jan 8 '14 at 17:35
badaboumbadaboum
3631725
|
show 1 more comment
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?
angularjs angularjs-directive ng-options
edited Jun 19 '16 at 8:01
Asim K T
6,39824664
asked Jan 8 '14 at 17:35
badaboumbadaboum
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
|
show 1 more comment
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?
angularjs angularjs-directive ng-options
edited Jun 19 '16 at 8:01
Asim K T
6,39824664
asked Jan 8 '14 at 17:35
badaboumbadaboum
3631725
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
angularjs angularjs-directive ng-options
edited Jun 19 '16 at 8:01
Asim K T
6,39824664
asked Jan 8 '14 at 17:35
badaboumbadaboum
3631725
edited Jun 19 '16 at 8:01
Asim K T
6,39824664
asked Jan 8 '14 at 17:35
badaboumbadaboum
3631725
edited Jun 19 '16 at 8:01
Asim K T
6,39824664
edited Jun 19 '16 at 8:01
Asim K T
6,39824664
edited Jun 19 '16 at 8:01
Asim K T
6,39824664
6,39824664
asked Jan 8 '14 at 17:35
badaboumbadaboum
3631725
asked Jan 8 '14 at 17:35
badaboumbadaboum
3631725
asked Jan 8 '14 at 17:35
badaboumbadaboum
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
|
show 1 more comment
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
|
show 1 more comment
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={};
})
edited Jun 19 '16 at 8:18
DeadAlready
2,5431215
answered Jan 8 '14 at 18:31
towrtowr
3,52031523
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 allowlabel disable when disable for ...
– Pakman
Mar 13 '15 at 20:56
add a comment |
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.
edited Jun 19 '16 at 8:27
Asim K T
6,39824664
answered Jan 26 '16 at 2:52
Nicolas Del ValleNicolas Del Valle
563614
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
add a comment |
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/
answered Jan 8 '14 at 17:52
luacassusluacassus
5,37123457
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
add a comment |
2
Solve with version 1.4 https://docs.angularjs.org/api/ng/directive/ngOptions [double check you look for v1.4 documentation]
answered Mar 28 '15 at 0:19
FulupFulup
370113
add a comment |
1
Probably something like this
<button ng-click='disableSelect=true'></button>
<select ng-disabled='disableSelect'></select>
answered Jan 8 '14 at 17:48
NicolasMoiseNicolasMoise
5,840104064
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
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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={};
})
edited Jun 19 '16 at 8:18
DeadAlready
2,5431215
answered Jan 8 '14 at 18:31
towrtowr
3,52031523
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 allowlabel disable when disable for ...
– Pakman
Mar 13 '15 at 20:56
add a comment |
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={};
})
edited Jun 19 '16 at 8:18
DeadAlready
2,5431215
answered Jan 8 '14 at 18:31
towrtowr
3,52031523
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 allowlabel disable when disable for ...
– Pakman
Mar 13 '15 at 20:56
add a comment |
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={};
})
edited Jun 19 '16 at 8:18
DeadAlready
2,5431215
answered Jan 8 '14 at 18:31
towrtowr
3,52031523
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={};
})
edited Jun 19 '16 at 8:18
DeadAlready
2,5431215
answered Jan 8 '14 at 18:31
towrtowr
3,52031523
edited Jun 19 '16 at 8:18
DeadAlready
2,5431215
edited Jun 19 '16 at 8:18
DeadAlready
2,5431215
edited Jun 19 '16 at 8:18
DeadAlready
2,5431215
2,5431215
answered Jan 8 '14 at 18:31
towrtowr
3,52031523
answered Jan 8 '14 at 18:31
towrtowr
3,52031523
answered Jan 8 '14 at 18:31
towrtowr
3,52031523
3,52031523
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 allowlabel disable when disable for ...
– Pakman
Mar 13 '15 at 20:56
add a comment |
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 allowlabel 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
add a comment |
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.
edited Jun 19 '16 at 8:27
Asim K T
6,39824664
answered Jan 26 '16 at 2:52
Nicolas Del ValleNicolas Del Valle
563614
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
add a comment |
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.
edited Jun 19 '16 at 8:27
Asim K T
6,39824664
answered Jan 26 '16 at 2:52
Nicolas Del ValleNicolas Del Valle
563614
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
add a comment |
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.
edited Jun 19 '16 at 8:27
Asim K T
6,39824664
answered Jan 26 '16 at 2:52
Nicolas Del ValleNicolas Del Valle
563614
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.
edited Jun 19 '16 at 8:27
Asim K T
6,39824664
answered Jan 26 '16 at 2:52
Nicolas Del ValleNicolas Del Valle
563614
edited Jun 19 '16 at 8:27
Asim K T
6,39824664
edited Jun 19 '16 at 8:27
Asim K T
6,39824664
edited Jun 19 '16 at 8:27
Asim K T
6,39824664
6,39824664
answered Jan 26 '16 at 2:52
Nicolas Del ValleNicolas Del Valle
563614
answered Jan 26 '16 at 2:52
Nicolas Del ValleNicolas Del Valle
563614
answered Jan 26 '16 at 2:52
Nicolas Del ValleNicolas Del Valle
563614
563614
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
add a comment |
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
add a comment |
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/
answered Jan 8 '14 at 17:52
luacassusluacassus
5,37123457
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
add a comment |
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/
answered Jan 8 '14 at 17:52
luacassusluacassus
5,37123457
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
add a comment |
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/
answered Jan 8 '14 at 17:52
luacassusluacassus
5,37123457
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/
answered Jan 8 '14 at 17:52
luacassusluacassus
5,37123457
answered Jan 8 '14 at 17:52
luacassusluacassus
5,37123457
answered Jan 8 '14 at 17:52
luacassusluacassus
5,37123457
answered Jan 8 '14 at 17:52
luacassusluacassus
5,37123457
5,37123457
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
add a comment |
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
add a comment |
2
Solve with version 1.4 https://docs.angularjs.org/api/ng/directive/ngOptions [double check you look for v1.4 documentation]
answered Mar 28 '15 at 0:19
FulupFulup
370113
add a comment |
2
Solve with version 1.4 https://docs.angularjs.org/api/ng/directive/ngOptions [double check you look for v1.4 documentation]
answered Mar 28 '15 at 0:19
FulupFulup
370113
add a comment |
2
2
2
Solve with version 1.4 https://docs.angularjs.org/api/ng/directive/ngOptions [double check you look for v1.4 documentation]
answered Mar 28 '15 at 0:19
FulupFulup
370113
Solve with version 1.4 https://docs.angularjs.org/api/ng/directive/ngOptions [double check you look for v1.4 documentation]
answered Mar 28 '15 at 0:19
FulupFulup
370113
answered Mar 28 '15 at 0:19
FulupFulup
370113
answered Mar 28 '15 at 0:19
FulupFulup
370113
answered Mar 28 '15 at 0:19
FulupFulup
370113
370113
add a comment |
add a comment |
1
Probably something like this
<button ng-click='disableSelect=true'></button>
<select ng-disabled='disableSelect'></select>
answered Jan 8 '14 at 17:48
NicolasMoiseNicolasMoise
5,840104064
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
add a comment |
1
Probably something like this
<button ng-click='disableSelect=true'></button>
<select ng-disabled='disableSelect'></select>
answered Jan 8 '14 at 17:48
NicolasMoiseNicolasMoise
5,840104064
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
add a comment |
1
1
1
Probably something like this
<button ng-click='disableSelect=true'></button>
<select ng-disabled='disableSelect'></select>
answered Jan 8 '14 at 17:48
NicolasMoiseNicolasMoise
5,840104064
Probably something like this
<button ng-click='disableSelect=true'></button>
<select ng-disabled='disableSelect'></select>
answered Jan 8 '14 at 17:48
NicolasMoiseNicolasMoise
5,840104064
edited Jan 8 '14 at 18:02
answered Jan 8 '14 at 17:48
NicolasMoiseNicolasMoise
5,840104064
answered Jan 8 '14 at 17:48
NicolasMoiseNicolasMoise
5,840104064
answered Jan 8 '14 at 17:48
NicolasMoiseNicolasMoise
5,840104064
5,840104064
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
add a comment |
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
add a comment |
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.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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