Support disabling options in select with ng:options

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

[Coder2012]

+1

[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

[acgentry]

+1

[borgateo]

+1
Would be great having no dependency to jQuery

[maliarov]

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

[chrsoo]

+1

[linkswapnil]

+1

[bmulholland]

+1

[durango]

+1

[vikasgulati]

+1

[vikasgulati]

Custom directive without jQuery dependency.

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

@borteo - Check this out!

[cquillen2003]

+1

[IgorMinar]

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

[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

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

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

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

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

[gkalpak]

@fredericlam, see #638 (comment).

[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 [email protected]:

you can fix this bug like
Test 1
Test 2

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