Skip to content
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 · 96 comments
Closed

Support disabling options in select with ng:options #638

esprehn opened this issue Nov 5, 2011 · 96 comments

Comments

@esprehn
Copy link
Contributor

@esprehn 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
Copy link

@lucsky lucsky commented Aug 21, 2012

+1

1 similar comment
@wilgert
Copy link

@wilgert wilgert commented Oct 26, 2012

+1

@alalonde
Copy link

@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
Copy link

@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
Copy link

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

@orlenko orlenko commented Mar 4, 2013

Thank you so much alalonde, you saved my day!

@Coder2012
Copy link

@Coder2012 Coder2012 commented Jun 28, 2013

+1

1 similar comment
@estufa8
Copy link

@estufa8 estufa8 commented Jul 10, 2013

+1

@chris-equis
Copy link

@chris-equis 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
Copy link

@terohe terohe commented Aug 23, 2013

+1

2 similar comments
@exocom
Copy link

@exocom exocom commented Sep 25, 2013

+1

@acgentry
Copy link

@acgentry acgentry commented Sep 27, 2013

+1

@borteo
Copy link

@borteo borteo commented Sep 30, 2013

+1
Would be great having no dependency to jQuery

@maliarov
Copy link

@maliarov maliarov 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
Copy link

@chrsoo chrsoo commented Nov 10, 2013

+1

4 similar comments
@linkswapnil
Copy link

@linkswapnil linkswapnil commented Nov 10, 2013

+1

@bmulholland
Copy link

@bmulholland bmulholland commented Dec 18, 2013

+1

@durango
Copy link

@durango durango commented Dec 21, 2013

+1

@vikasgulati
Copy link

@vikasgulati vikasgulati commented Dec 26, 2013

+1

@vikasgulati
Copy link

@vikasgulati vikasgulati commented Dec 26, 2013

Custom directive without jQuery dependency.

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

@borteo - Check this out!

@cquillen2003
Copy link

@cquillen2003 cquillen2003 commented Jan 8, 2014

+1

@IgorMinar
Copy link
Member

@IgorMinar 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
Copy link

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

+1

2 similar comments
@xcorat
Copy link

@xcorat xcorat commented Feb 17, 2014

+1

@apuchkov
Copy link

@apuchkov apuchkov commented Feb 26, 2014

+1

@paulovpereira
Copy link

@paulovpereira 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
Copy link

@BjornFridal BjornFridal commented Mar 23, 2014

+1

@tkrotoff
Copy link

@tkrotoff 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
Copy link

@hakanostrom 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>
@hanchennz
Copy link

@hanchennz hanchennz commented Apr 17, 2014

+1

@jparmar
Copy link

@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
Copy link

@greglockwood 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
Copy link

@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 added a commit to sjbarker/angular.js that referenced this issue Feb 9, 2015
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 angular#638
sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 10, 2015
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 angular#638
sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 10, 2015
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 angular#638
sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 11, 2015
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 angular#638
sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 13, 2015
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 angular#638
closes angular#11050
sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 13, 2015
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 angular#638
sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 17, 2015
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 angular#638
sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 18, 2015
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 angular#638
sjbarker added a commit to sjbarker/angular.js that referenced this issue Feb 18, 2015
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 angular#638
Closes angular#11017
@ivkremer
Copy link

@ivkremer 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
Copy link

@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 added a commit to netman92/angular.js that referenced this issue Aug 8, 2015
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 angular#638
Closes angular#11017
@premboyapati
Copy link

@premboyapati 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
Copy link

@anilkganhari 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
Copy link
Member

@gkalpak 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
Copy link

@fredericlam fredericlam commented Feb 23, 2016

Still nothing native to Angular ?

@gkalpak
Copy link
Member

@gkalpak gkalpak commented Feb 23, 2016

@fredericlam
Copy link

@fredericlam fredericlam commented Feb 23, 2016

@gkalpak Wow, sorry, and thanks

@LucasFrecia
Copy link

@LucasFrecia 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

You can’t perform that action at this time.