Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Support disabling options in select with ng:options #638

Closed
esprehn opened this Issue · 89 comments
@esprehn

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

+1

@wilgert

+1

@alalonde

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

+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

Thank you so much alalonde, you saved my day!

@estufa8

+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

+1

@exocom

+1

@borteo

+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

+1

@Dorian

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

@durango

+1

@vikasgulati

Custom directive without jQuery dependency.

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

@borteo - Check this out!

@IgorMinar
Owner

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

@k-dauda

+1

@xcorat

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

@bjawnie

+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>
@jonashw

+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

@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

+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

@mustela

+1

@bvaughn

+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

+1 and also for @cades' syntax suggestion:

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

@coolaj86

+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

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

@aronduby

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

@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

+1

@loddit

+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

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

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

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

@aronduby

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

@cades

@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

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

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

@cades

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

@cades cades referenced this issue from a commit in cades/angular.js
@cades cades 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-

great job!

@runcom

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

@lekhnath

:+1: any good news on this ?

@lebster

+1

@jBox

+1

@janeklb

+1

@jparmar

+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

@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 referenced this issue from a commit
@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 model, even
if disabled option selection is attempted programmatically. Support extends
to multiple selections as well.

closes #638
91061e4
@sjbarker sjbarker referenced this issue from a commit
@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
8c075fd
@sjbarker sjbarker referenced this issue from a commit
@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
9cd7ddc
@sjbarker sjbarker referenced this issue from a commit in sjbarker/angular.js
@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 referenced this issue from a commit in sjbarker/angular.js
@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 referenced this issue from a commit in sjbarker/angular.js
@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 referenced this issue from a commit in sjbarker/angular.js
@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 referenced this issue from a commit in sjbarker/angular.js
@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 referenced this issue from a commit in sjbarker/angular.js
@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 referenced this issue from a commit in sjbarker/angular.js
@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 referenced this issue from a commit in sjbarker/angular.js
@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 closed this issue from a commit
@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
da9eac8
@sjbarker sjbarker referenced this issue from a commit in sjbarker/angular.js
@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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.