Support disabling options in select with ng:options #638

Closed
esprehn opened this Issue Nov 5, 2011 · 98 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
lucsky commented Aug 21, 2012

+1

@wilgert
wilgert commented Oct 26, 2012

+1

@alalonde
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
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

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
orlenko commented Mar 4, 2013

Thank you so much alalonde, you saved my day!

@Coder2012

+1

@estufa8
estufa8 commented Jul 10, 2013

+1

@chris-equis

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
terohe commented Aug 23, 2013

+1

@exocom
exocom commented Sep 25, 2013

+1

@acgentry

+1

@borteo
borteo commented Sep 30, 2013

+1
Would be great having no dependency to jQuery

@mujichOk

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

@chrsoo
chrsoo commented Nov 10, 2013

+1

@linkswapnil

+1

@Dorian
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

+1

@durango
durango commented Dec 21, 2013

+1

@vikasgulati

+1

@vikasgulati

Custom directive without jQuery dependency.

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

@borteo - Check this out!

@cquillen2003

+1

@IgorMinar
Member

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

@k-dauda
k-dauda commented Feb 13, 2014

+1

@xcorat
xcorat commented Feb 17, 2014

+1

@apuchkov

+1

@paulovpereira

@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

+1

@tkrotoff

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

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

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

+1

@mlegenhausen

+1

@martijn80

+1

@jonashw
jonashw commented Apr 25, 2014

+1 (@tkrotoff Thanks for the workaround :)

@connorbode

+1

@hakanostrom

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

does that actually work for you? when i do this it always selects the first (selectable) option, not the default disabled option :(

@m4r71n
m4r71n commented May 19, 2014

@connorbode @hakanostrom
I have the same issue with

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

and Firefox. Chrome and IE11 works fine.

@cades
cades commented Jun 23, 2014

+1
ng-repeat cannot achieve group by easily.

Hope for syntax like

select as label disable if cond group by group for value in array

@steffenkuche

+1

@lukeychelt

+1

@rhys-vdw

+1

@mustela
Contributor
mustela commented Jul 11, 2014

+1

@bvaughn
bvaughn commented Jul 14, 2014

+1

@antonchaika

+1

@Lennholm

+1
This is extremely difficult to work out, alalonde's solution is nice but incompatible with 'group by'. At the same time though, it should be a rather simple feature to add to the existing ngOptions directive.

@q00p
q00p commented Jul 22, 2014

+1 and also for @cades' syntax suggestion:

select as label disable if cond group by group for value in array

@bmasetto

+1

@zdychacek

+1

@coolaj86
coolaj86 commented Aug 3, 2014

+1

FYI, This seems to work decently well:

HTML

<select ng-model="L.selectVal" class="form-control" required="required">
  <option value="" disabled="disabled" selected="selected">-- Select Thingy --</option>
  <option ng-repeat="thingy in L.things" value="{{thingy.id}}">{{ thingy.label }}</option>
</select>

Jade

select.form-control(ng-model="L.selectVal" required="required")
  option(value="" disabled="disabled" selected="selected") -- Select Thingy --
  option(ng-repeat="thingy in L.things" value="{{thingy.id}}") {{ thingy.label }}
@exocom
exocom commented Aug 3, 2014

@coolaj86 Not recommend because ng-repeat inside a select will not render correctly on IE. There is an open issue for it : #2809

@ojacquemart

+1

@aronduby
aronduby commented Sep 3, 2014

another +1 for @cades recommendation, it's exactly what I was hoping for

select as label disable if cond group by group for value in array

@vasanthps

+1

@bertrandg

+1

@JohnPennington

+1
@alalonde and @vikasgulati - Thank you both for a great fix for this issue. Has anyone updated this directive to be compatible with Group By?

@Xartok
Xartok commented Sep 15, 2014

+1

@Londeren

+1

@loddit
loddit commented Sep 24, 2014

+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.

this syntax make sence

@cades
cades commented Sep 24, 2014

Hello everybody, I'm working on a PR to make ng-options support disable.
So far we have two syntax proposals:

select as label with options for value in array

by @Dorian, and

select as label disable if cond group by group for value in array

by @cades.

Which one do you prefer and why, or there is another syntax proposal?

@cades
cades commented Sep 24, 2014

I found a problem in syntax

select as label with options for value in array

If there's code like this:

<select ng-options="product.id as product.name with options for product in products"></select>
function Ctrl($scope){
  $scope.options = {
    disabled: product.available
  };
  $scope.products = [
    {id:1, name: 'P1', available: true},
    {id:2, name: 'P2', available: false}
  ];
}

$scope.options cannot be an hash like: {disabled: product.available}, because product does not live in the scope of where $scope.options is declared.
However, it can be a string like: 'product.available', or a callback like

$scope.options = {
  disabled: function(product){
    return product.available;
  }
};
@aronduby

@cades awesome!

I think select as label disable if cond group by group for value in array is the way to go as it's more obvious from the statement what is happening. No having to jump through other files just to see why something is being disabled, you can see it right there

@Dorian
Dorian commented Sep 24, 2014

@cades I meants the options hash would be declared inline:

<select ng-options="product.id as product.name with {disabled: product.available} for product in products"></select>

I think this is more flexible if other options have to be added later

@aronduby

Have you thought about using an additional attribute, like ng-options-disabled?

@cades
cades commented Sep 24, 2014

@aronduby @vikasgulati has provided one.

@aronduby

@cades yes, but it doesn't work with group-by

@cades
cades commented Sep 24, 2014

@aronduby Yes it doesn't :( An separate directive need modification to ng-options, too.

@greglockwood

@cades I vote for the select as label disable if cond group by group for value in array option, as I cannot personally think of anything else you would need to do to an option that isn't already covered by existing functionality. Conditional disabling is the last major functionality gap for ng-options, and I am excited by the idea of your PR, especially if it got accepted into core.

@cades
cades commented Oct 29, 2014

Now the PR is ready (disable if version), however I found another issue: what if the default option (initial value set on $scope, which binds to select's ng-model) is disabled?
Should we prevent user from doing this, or respect user's intention?

The possible behavior may be:

  1. select it (as user wish)
  2. use null option, and (optionally) print warning message to console
  3. throw an exception, forcing user to resolve it
@mathroc
mathroc commented Oct 29, 2014

@cades i think it should be the same behavior as plain HTML: select it ( http://jsfiddle.net/006vyh0b/ )

@cades
cades commented Oct 29, 2014

@mathroc++
And this is the default behavior (without extra work)

@cades cades pushed a commit to cades/angular.js that referenced this issue Oct 31, 2014
hong-jen kao feat(select): ngOptions support disabling options
Extend the ngOptions DSL to support disabling options. Since <option>
elements are generated by ngOptions, we cannot use ngDisabled in this
scenario. Via extend the DSL, user have control over if a option
is diabled on arbitrary condition.

This commit insert a `disable if cond` match syntax into
NG_OPTIONS_REGEXP, change other match index accordingly, add disabled
attribute to null option element and newly cloned option elements,
add 2 new unit tests, and change docs as well.

Closes #638
68960ee
@Mickey-
Mickey- commented Nov 7, 2014

great job!

@runcom
runcom commented Dec 2, 2014

+1

@chadreed-intl

+1

Currently using @vikasgulati solution, but notice that it doesn't support dynamic options. There needs to be a watch on the first argument so that if that changes, the disabled attribute will be updated.

@ankit-saxena

+1

@lekhnath

👍 any good news on this ?

@lebster
lebster commented Jan 7, 2015

+1

@gcardosostep

+1

@jBox
jBox commented Jan 22, 2015

+1

@janeklb
janeklb commented Jan 23, 2015

+1

@knivets
knivets commented Jan 24, 2015

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

@giladbeeri

+1

@jparmar
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

@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
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 sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 9, 2015
@sjbarker sjbarker 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
77ae42d
@sjbarker sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 10, 2015
@sjbarker sjbarker 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
6237b45
@sjbarker sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 10, 2015
@sjbarker sjbarker 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
5afa825
@sjbarker sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 11, 2015
@sjbarker sjbarker 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
6e468c8
@sjbarker sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 13, 2015
@sjbarker sjbarker 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
e0c1ad7
@sjbarker sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 13, 2015
@sjbarker sjbarker 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
ff55791
@sjbarker sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 17, 2015
@sjbarker sjbarker 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
dd1e6b8
@sjbarker sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 18, 2015
@sjbarker sjbarker 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
518bf01
@petebacondarwin petebacondarwin added a commit that closed this issue Feb 18, 2015
@sjbarker @petebacondarwin sjbarker + petebacondarwin 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
da9eac8
@sjbarker sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 18, 2015
@sjbarker sjbarker 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
f3ae91d
@ivkremer

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
Xartok commented Jun 11, 2015

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

@netman92 netman92 added a commit to netman92/angular.js that referenced this issue Aug 8, 2015
@sjbarker @netman92 sjbarker + netman92 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
8bc638f
@premboyapati

@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

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
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

Still nothing native to Angular ?

@fredericlam

@gkalpak Wow, sorry, and thanks

@LucasFrecia

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