New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support disabling options in select with ng:options #638

Closed
esprehn opened this Issue Nov 5, 2011 · 98 comments

Comments

Projects
None yet
@esprehn
Contributor

esprehn commented Nov 5, 2011

Need a way to construct

<select>
  <option disabled>A</option>
  <option>B</option>
  <optionC</option>
</select>

There's no way to express the disabled state of a specific option with ng:options

@lucsky

This comment has been minimized.

Show comment
Hide comment
@lucsky

lucsky commented Aug 21, 2012

+1

@wilgert

This comment has been minimized.

Show comment
Hide comment
@wilgert

wilgert commented Oct 26, 2012

+1

@alalonde

This comment has been minimized.

Show comment
Hide comment
@alalonde

alalonde Nov 8, 2012

I put together a directive as a hack around this limitation: http://jsfiddle.net/alalonde/dZDLg/5/

YMMV. What would a good syntax be to implement this in ng-options?

alalonde commented Nov 8, 2012

I put together a directive as a hack around this limitation: http://jsfiddle.net/alalonde/dZDLg/5/

YMMV. What would a good syntax be to implement this in ng-options?

@zalesak

This comment has been minimized.

Show comment
Hide comment
@zalesak

zalesak Dec 16, 2012

+1
your directive is very good, but not sufficient:

model [{id: 1, title: 'Credit card'},{id:4, title: 'For free'}, {id: 7, title: 'Dont want it'}]
select will looks like this:
Credit card For free Dont want it

when i want to disable i.e. "for free" option, you have to iterate through model and take array position for "For free" object (i.e 1). Problem is when angular ads empty option:

Credit card For free Dont want it

model[i] is shifted against expected data, so option[1] is "Credit card" not "For free"...

zalesak commented Dec 16, 2012

+1
your directive is very good, but not sufficient:

model [{id: 1, title: 'Credit card'},{id:4, title: 'For free'}, {id: 7, title: 'Dont want it'}]
select will looks like this:
Credit card For free Dont want it

when i want to disable i.e. "for free" option, you have to iterate through model and take array position for "For free" object (i.e 1). Problem is when angular ads empty option:

Credit card For free Dont want it

model[i] is shifted against expected data, so option[1] is "Credit card" not "For free"...

@alalonde

This comment has been minimized.

Show comment
Hide comment
@alalonde

alalonde Dec 17, 2012

Yes, I have added a number of enhancement to the directive in the meantime. Here is an updated version that should fix your problem: http://jsfiddle.net/alalonde/dZDLg/9/

alalonde commented Dec 17, 2012

Yes, I have added a number of enhancement to the directive in the meantime. Here is an updated version that should fix your problem: http://jsfiddle.net/alalonde/dZDLg/9/

@orlenko

This comment has been minimized.

Show comment
Hide comment
@orlenko

orlenko Mar 4, 2013

Thank you so much alalonde, you saved my day!

orlenko commented Mar 4, 2013

Thank you so much alalonde, you saved my day!

@Coder2012

This comment has been minimized.

Show comment
Hide comment
@Coder2012

Coder2012 commented Jun 28, 2013

+1

@estufa8

This comment has been minimized.

Show comment
Hide comment
@estufa8

estufa8 commented Jul 10, 2013

+1

@chris-equis

This comment has been minimized.

Show comment
Hide comment
@chris-equis

chris-equis Jul 29, 2013

It's very wierd. It works but it disables the previous option, so changing from locals[attr] = data[i]; to locals[attr] = data[i-1]; did the trick. I've tested it by placing a disabled: true property on the first and last item from the object to see if something breaks, but didn't break anything... it just works :)

chris-equis commented Jul 29, 2013

It's very wierd. It works but it disables the previous option, so changing from locals[attr] = data[i]; to locals[attr] = data[i-1]; did the trick. I've tested it by placing a disabled: true property on the first and last item from the object to see if something breaks, but didn't break anything... it just works :)

@terohe

This comment has been minimized.

Show comment
Hide comment
@terohe

terohe commented Aug 23, 2013

+1

@exocom

This comment has been minimized.

Show comment
Hide comment
@exocom

exocom commented Sep 25, 2013

+1

@acgentry

This comment has been minimized.

Show comment
Hide comment
@acgentry

acgentry commented Sep 27, 2013

+1

@borteo

This comment has been minimized.

Show comment
Hide comment
@borteo

borteo Sep 30, 2013

+1
Would be great having no dependency to jQuery

borteo commented Sep 30, 2013

+1
Would be great having no dependency to jQuery

@mujichOk

This comment has been minimized.

Show comment
Hide comment
@mujichOk

mujichOk Oct 15, 2013

as for data[i-1] - this is in general wrong, because 1 should be replaced number of options in HTML template.

mujichOk commented Oct 15, 2013

as for data[i-1] - this is in general wrong, because 1 should be replaced number of options in HTML template.

@chrsoo

This comment has been minimized.

Show comment
Hide comment
@chrsoo

chrsoo commented Nov 10, 2013

+1

@linkswapnil

This comment has been minimized.

Show comment
Hide comment
@linkswapnil

linkswapnil commented Nov 10, 2013

+1

@Dorian

This comment has been minimized.

Show comment
Hide comment
@Dorian

Dorian Nov 25, 2013

+1, the syntax could be

select as label with options for value in array

With options being an hash like: {disabled: product.available}

See actual documentation.

Dorian commented Nov 25, 2013

+1, the syntax could be

select as label with options for value in array

With options being an hash like: {disabled: product.available}

See actual documentation.

@bmulholland

This comment has been minimized.

Show comment
Hide comment
@bmulholland

bmulholland commented Dec 18, 2013

+1

@durango

This comment has been minimized.

Show comment
Hide comment
@durango

durango commented Dec 21, 2013

+1

@vikasgulati

This comment has been minimized.

Show comment
Hide comment
@vikasgulati

vikasgulati commented Dec 26, 2013

+1

@vikasgulati

This comment has been minimized.

Show comment
Hide comment
@vikasgulati

vikasgulati Dec 26, 2013

Custom directive without jQuery dependency.

http://stackoverflow.com/a/20790905/1283546

@borteo - Check this out!

vikasgulati commented Dec 26, 2013

Custom directive without jQuery dependency.

http://stackoverflow.com/a/20790905/1283546

@borteo - Check this out!

@cquillen2003

This comment has been minimized.

Show comment
Hide comment
@cquillen2003

cquillen2003 commented Jan 8, 2014

+1

@IgorMinar

This comment has been minimized.

Show comment
Hide comment
@IgorMinar

IgorMinar Jan 13, 2014

Member

I'd rather get this working with ngRepeat and then you could use ngDisabled to disable the field as need

Member

IgorMinar commented Jan 13, 2014

I'd rather get this working with ngRepeat and then you could use ngDisabled to disable the field as need

@k-dauda

This comment has been minimized.

Show comment
Hide comment
@k-dauda

k-dauda commented Feb 13, 2014

+1

@xcorat

This comment has been minimized.

Show comment
Hide comment
@xcorat

xcorat commented Feb 17, 2014

+1

@apuchkov

This comment has been minimized.

Show comment
Hide comment
@apuchkov

apuchkov commented Feb 26, 2014

+1

@paulovpereira

This comment has been minimized.

Show comment
Hide comment
@paulovpereira

paulovpereira Mar 12, 2014

@IgorMinar I've tried this aproaching, but it added some levels of complexity to the management of ng-model (list of ids) since I had to work with Strings istead of Integer to keep the Select element selecting the right options.

And besides, its much more verbose with ng-repeat.

paulovpereira commented Mar 12, 2014

@IgorMinar I've tried this aproaching, but it added some levels of complexity to the management of ng-model (list of ids) since I had to work with Strings istead of Integer to keep the Select element selecting the right options.

And besides, its much more verbose with ng-repeat.

@BjornFridal

This comment has been minimized.

Show comment
Hide comment
@BjornFridal

BjornFridal commented Mar 23, 2014

+1

@tkrotoff

This comment has been minimized.

Show comment
Hide comment
@tkrotoff

tkrotoff Mar 30, 2014

Edit: select & option with ng-repeat gave me some issues (I guess that's why ng-options exists in the first place), I went for having multiple select with ng-options and hide/show them depending on the context

Instead of using a new directive (the jsfiddles from above) you can simply use ng-repeat:

<select ng-model="item.status">
  <option ng-repeat="status in statusList"
          ng-selected="status.value === item.status"
          value="{{status.value}}"
          ng-disabled="status.value === '42'">
    {{status.text}}
  </option>
</select>

tkrotoff commented Mar 30, 2014

Edit: select & option with ng-repeat gave me some issues (I guess that's why ng-options exists in the first place), I went for having multiple select with ng-options and hide/show them depending on the context

Instead of using a new directive (the jsfiddles from above) you can simply use ng-repeat:

<select ng-model="item.status">
  <option ng-repeat="status in statusList"
          ng-selected="status.value === item.status"
          value="{{status.value}}"
          ng-disabled="status.value === '42'">
    {{status.text}}
  </option>
</select>
@hakanostrom

This comment has been minimized.

Show comment
Hide comment
@hakanostrom

hakanostrom Apr 3, 2014

As for the first value (as a placeholder) I use.

<select ng-model"..." ng-options="...">
 <option value="" disabled selected>[Make your choise]</option>
</select>

hakanostrom commented Apr 3, 2014

As for the first value (as a placeholder) I use.

<select ng-model"..." ng-options="...">
 <option value="" disabled selected>[Make your choise]</option>
</select>
@gcardosostep

This comment has been minimized.

Show comment
Hide comment
@gcardosostep

gcardosostep commented Jan 8, 2015

+1

@jBox

This comment has been minimized.

Show comment
Hide comment
@jBox

jBox commented Jan 22, 2015

+1

@janeklb

This comment has been minimized.

Show comment
Hide comment
@janeklb

janeklb commented Jan 23, 2015

+1

@knivets

This comment has been minimized.

Show comment
Hide comment
@knivets

knivets commented Jan 24, 2015

Made up a quick directive here - https://github.com/knivets/angular-options-disabled

@giladbeeri

This comment has been minimized.

Show comment
Hide comment
@giladbeeri

giladbeeri commented Jan 28, 2015

+1

@jparmar

This comment has been minimized.

Show comment
Hide comment
@jparmar

jparmar Jan 30, 2015

+1

also It good to have some functionality to skip particular option

For eg.

ng-options="page.id as page.name for page in pages" ng-option-skip="page.id === 100"

the above code should skip rendering an option html when particular psge.id value is 100 in this case.

PS: ng-if can be used here, but it would be better if ng-option itself has some functionality.

jparmar commented Jan 30, 2015

+1

also It good to have some functionality to skip particular option

For eg.

ng-options="page.id as page.name for page in pages" ng-option-skip="page.id === 100"

the above code should skip rendering an option html when particular psge.id value is 100 in this case.

PS: ng-if can be used here, but it would be better if ng-option itself has some functionality.

@greglockwood

This comment has been minimized.

Show comment
Hide comment
@greglockwood

greglockwood Jan 30, 2015

@jparmar: Wouldn't you use a filter in that case to modify the collection that ng-options is rendering? This enhancement is needed because you still want to render an item in the collection as an option, but have it be disabled, which a filter won't help you with.

greglockwood commented Jan 30, 2015

@jparmar: Wouldn't you use a filter in that case to modify the collection that ng-options is rendering? This enhancement is needed because you still want to render an item in the collection as an option, but have it be disabled, which a filter won't help you with.

@rutwick

This comment has been minimized.

Show comment
Hide comment
@rutwick

rutwick Jan 30, 2015

@knivets @chadreed-intl +1 for the dynamic options issue.

@chadreed-intl Did you find a solution to make it work for dynamic options? I'm having a hard time figuring it out!

rutwick commented Jan 30, 2015

@knivets @chadreed-intl +1 for the dynamic options issue.

@chadreed-intl Did you find a solution to make it work for dynamic options? I'm having a hard time figuring it out!

sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 9, 2015

feat(ngOptions): add support for disabling an option
This patch adds support for disabling options based on model values. The
"disable by" syntax allows for listening to changes on those model values,
in order to dynamically enable and disable the options.

The changes prevent disabled options from being written to the selectCtrl
from the model. If a disabled selection is present on the model, normal
unknown or empty functionality kicks in.

closes #638

sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 10, 2015

feat(ngOptions): add support for disabling an option
This patch adds support for disabling options based on model values. The
"disable by" syntax allows for listening to changes on those model values,
in order to dynamically enable and disable the options.

The changes prevent disabled options from being written to the selectCtrl
from the model. If a disabled selection is present on the model, normal
unknown or empty functionality kicks in.

closes #638

sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 10, 2015

feat(ngOptions): add support for disabling an option
This patch adds support for disabling options based on model values. The
"disable by" syntax allows for listening to changes on those model values,
in order to dynamically enable and disable the options.

The changes prevent disabled options from being written to the selectCtrl
from the model. If a disabled selection is present on the model, normal
unknown or empty functionality kicks in.

closes #638

sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 11, 2015

feat(ngOptions): add support for disabling an option
This patch adds support for disabling options based on model values. The
"disable by" syntax allows for listening to changes on those model values,
in order to dynamically enable and disable the options.

The changes prevent disabled options from being written to the selectCtrl
from the model. If a disabled selection is present on the model, normal
unknown or empty functionality kicks in.

closes #638

sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 13, 2015

feat(ngOptions): add support for disabling an option
This patch adds support for disabling options based on model values. The
"disable when" syntax allows for listening to changes on those model values,
in order to dynamically enable and disable the options.

The changes prevent disabled options from being written to the selectCtrl
from the model. If a disabled selection is present on the model, normal
unknown or empty functionality kicks in.

Additionally, instead of adding more unnecessary watchers, if either label
or disableWhen are not matched in the ngOptions expression, they will not be
watched.

closes #638
closes #11050

sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 13, 2015

feat(ngOptions): add support for disabling an option
This patch adds support for disabling options based on model values. The
"disable when" syntax allows for listening to changes on those model values,
in order to dynamically enable and disable the options.

The changes prevent disabled options from being written to the selectCtrl
from the model. If a disabled selection is present on the model, normal
unknown or empty functionality kicks in.

closes #638

sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 17, 2015

feat(ngOptions): add support for disabling an option
This patch adds support for disabling options based on model values. The
"disable when" syntax allows for listening to changes on those model values,
in order to dynamically enable and disable the options.

The changes prevent disabled options from being written to the selectCtrl
from the model. If a disabled selection is present on the model, normal
unknown or empty functionality kicks in.

closes #638

sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 18, 2015

feat(ngOptions): add support for disabling an option
This patch adds support for disabling options based on model values. The
"disable when" syntax allows for listening to changes on those model values,
in order to dynamically enable and disable the options.

The changes prevent disabled options from being written to the selectCtrl
from the model. If a disabled selection is present on the model, normal
unknown or empty functionality kicks in.

closes #638

sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 18, 2015

feat(ngOptions): add support for disabling an option
This patch adds support for disabling options based on model values. The
"disable when" syntax allows for listening to changes on those model values,
in order to dynamically enable and disable the options.

The changes prevent disabled options from being written to the selectCtrl
from the model. If a disabled selection is present on the model, normal
unknown or empty functionality kicks in.

Closes #638
Closes #11017
@ivkremer

This comment has been minimized.

Show comment
Hide comment
@ivkremer

ivkremer Jun 11, 2015

I think this is applicable while there is no way to do this via ng-options:

<option ng-repeat="option in myOptions" value="{{ option.key }}" ng-disabled="option.disabled">
    {{ option.label }}
</option>
$scope.myOptions = [{
    key: 'key1',
    label: 'Key #1'
}, {
    key: 'key2',
    label: 'Key #2',
    disabled: true
}];

ivkremer commented Jun 11, 2015

I think this is applicable while there is no way to do this via ng-options:

<option ng-repeat="option in myOptions" value="{{ option.key }}" ng-disabled="option.disabled">
    {{ option.label }}
</option>
$scope.myOptions = [{
    key: 'key1',
    label: 'Key #1'
}, {
    key: 'key2',
    label: 'Key #2',
    disabled: true
}];
@Xartok

This comment has been minimized.

Show comment
Hide comment
@Xartok

Xartok Jun 11, 2015

ng-repeat on option doesn't work in IE (at least IE8). It was mentioned here #638 (comment)

Xartok commented Jun 11, 2015

ng-repeat on option doesn't work in IE (at least IE8). It was mentioned here #638 (comment)

netman92 added a commit to netman92/angular.js that referenced this issue Aug 8, 2015

feat(ngOptions): add support for disabling an option
This patch adds support for disabling options based on model values. The
"disable when" syntax allows for listening to changes on those model values,
in order to dynamically enable and disable the options.

The changes prevent disabled options from being written to the selectCtrl
from the model. If a disabled selection is present on the model, normal
unknown or empty functionality kicks in.

Closes #638
Closes #11017
@premboyapati

This comment has been minimized.

Show comment
Hide comment
@premboyapati

premboyapati Aug 26, 2015

@alalonde

In this example: http://jsfiddle.net/alalonde/dZDLg/9/

Set value from test to null for selectedPort variable like this $scope.selectedport = null;
The code will break...It does not disable untill we select some option...
Could you help me how to fix this issue?

Thanks
Prem.

premboyapati commented Aug 26, 2015

@alalonde

In this example: http://jsfiddle.net/alalonde/dZDLg/9/

Set value from test to null for selectedPort variable like this $scope.selectedport = null;
The code will break...It does not disable untill we select some option...
Could you help me how to fix this issue?

Thanks
Prem.

@anilkganhari

This comment has been minimized.

Show comment
Hide comment
@anilkganhari

anilkganhari Jan 10, 2016

When the this directive http://jsfiddle.net/alalonde/dZDLg/9/

is used inside ag-grid,The disbled property is not applied to he options until we do a selection in the select box.

could you please help on this?

anilkganhari commented Jan 10, 2016

When the this directive http://jsfiddle.net/alalonde/dZDLg/9/

is used inside ag-grid,The disbled property is not applied to he options until we do a selection in the select box.

could you please help on this?

@gkalpak

This comment has been minimized.

Show comment
Hide comment
@gkalpak

gkalpak Jan 10, 2016

Member

@anilkganhari, since you seem to be using angular-options-disabled, you should probably ask the question in their repo. This is not related to core Angular.

BTW, the ngOptions DSL now supports "disable when" for disabling specific options (see docs).
(Make sure that your Angular version has this feature, before using it.)

Member

gkalpak commented Jan 10, 2016

@anilkganhari, since you seem to be using angular-options-disabled, you should probably ask the question in their repo. This is not related to core Angular.

BTW, the ngOptions DSL now supports "disable when" for disabling specific options (see docs).
(Make sure that your Angular version has this feature, before using it.)

@fredericlam

This comment has been minimized.

Show comment
Hide comment
@fredericlam

fredericlam Feb 23, 2016

Still nothing native to Angular ?

fredericlam commented Feb 23, 2016

Still nothing native to Angular ?

@gkalpak

This comment has been minimized.

Show comment
Hide comment
@gkalpak
Member

gkalpak commented Feb 23, 2016

@fredericlam

This comment has been minimized.

Show comment
Hide comment
@fredericlam

fredericlam Feb 23, 2016

@gkalpak Wow, sorry, and thanks

fredericlam commented Feb 23, 2016

@gkalpak Wow, sorry, and thanks

@LucasFrecia

This comment has been minimized.

Show comment
Hide comment
@LucasFrecia

LucasFrecia Feb 24, 2016

funka capo! bien ahi alto team...estoy sin celular no me funcionan los
botones, calculo que el sabado como mucho lo cambio, mientras tanto nos
comunicamos por este medio

2015-11-25 13:35 GMT-03:00 Dishant Mehta notifications@github.com:

you can fix this bug like
Test 1
Test 2


Reply to this email directly or view it on GitHub
#638 (comment).

LucasFrecia commented Feb 24, 2016

funka capo! bien ahi alto team...estoy sin celular no me funcionan los
botones, calculo que el sabado como mucho lo cambio, mientras tanto nos
comunicamos por este medio

2015-11-25 13:35 GMT-03:00 Dishant Mehta notifications@github.com:

you can fix this bug like
Test 1
Test 2


Reply to this email directly or view it on GitHub
#638 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment