AngularJS 1.1.2 ng-show for <select> options not working on Google Chrome Stable Mac OS X

[Žilvinas Urbonas]

 Hello, I've encountered some problem when using AngularJS 1.1.2 with  Google Chrome on Mac OS X. Tested on Safari and Firefox - no such problem existed, no problems with Google Chrome either when using Ubuntu. I have one control-group (Twitter Boostrap) which has currency ng-model. 

            <div class="control-group">

                <label class="control-label" for="currency">

                    {{ 'currency' | i18n }}

                </label>

                <div class="controls">

                    <select ng-model="currency" ng-change="currencyChanged()"

                        ng-options="currency for currency in currencies" class="input-mini" id="currency">

                    </select>

                </div>

            </div>

Depending on the selected currency it should hide or show some options from other control group select element:

            <div class="control-group">

                <label class="control-label" for="residualValue">

                    {{ 'residual-value' | i18n }}    

                </label>

                <div class="controls nowrap">

                    <input type="number" ng-model="residualValue" class="input-small" id="residualValue"/>

                    <select ng-model="residualValueType" class="input-mini">

                        <option>%</option>

                        <option ng-hide="currency != 'LTL'">LTL</option>

                        <option ng-hide="currency != 'EUR'">EUR</option>

                    </select>

                </div>

            </div>

But on Google Chrome (only on Mac OS X, not sure for Windows) it doesn't seem to take any effect, tried changing ng-hide="currency!='LTL'" to ng-show="currency=='LTL'", same problem persisted. Any idea? Maybe I am doing something wrong?

[florian.i...@gmail.com]

Hi,

don't know if after six months this is still interesting to anyone, but this thread turned up in a Google search for me, so I'm gonna reply anyway.

The problem here is that ng-hide works by setting the CSS display property to none. This is supported for <option> elements in Firefox, but not in Chrome, Safari or IE. See related entries on stackoverflow for this.

In you case I would suggest using the ng-options directive and filtering the input to ng-options depending on the currency instead of explicitly listing the <option>s.

Hope this helps anyone,

Florian

[Zohar Jackson]

Thanks Florian. 

The easiest way to make `options` disappear is to use ngIf.  See https://docs.angularjs.org/api/ng/directive/ngIf

In some cases it could be appropriate to use ng-disabled. This will leave the option in the drop down(on chrome) but it will not be selectable by the user. 

Hope this helps,

Zohar Jackson