Is it possible to run an ng-switch directly on a select > option

Posted by Asok on Stack Overflow See other posts from Stack Overflow or by Asok
Published on 2013-10-23T03:13:16Z Indexed on 2013/10/23 3:53 UTC
Read the original article Hit count: 566

Has anyone been able to run an ng-switch on a <select> -> <option> tag, like so?:

<select ng-model="form.permitLocality" ng-switch on="localityTypeRadio">
    <option ng-switch-when="County" ng-repeat="county in countyList">
        {{ county.name }}
    </option>
    <option ng-switch-when="City" ng-repeat="city in cityList">
        {{ city.name }}
    </option>
    <option ng-switch-when="Town" ng-repeat="town in townList">
        {{ town.name }}
    </option>
</select>

I am not getting any errors or any options (all values verified), I just thought it would save me a couple lines and thought I'd try it.

Here is my selector, in case you're curious (value verified):

<label class="radio inline">
    <input type="radio" name="localityTypeRadio"
        ng-model="localityTypeRadio" value="County">
    County
</label>
<label class="radio inline">
    <input type="radio" name="localityTypeRadio" 
        ng-model="localityTypeRadio" value="City">
    City
</label>
<label class="radio inline">
    <input type="radio" name="localityTypeRadio" 
        ng-model="localityTypeRadio" value="Town">
    Town
</label>

This is not a big deal, just didn't know if this was a limitation / not recommended with an ng-switch


EDIT

I was mistaken when I initially said that nothing was happening (browser caching), there appears to be the correct number of options but the source code shows nothing but white space:

<select ng-model="form.permitLocality" class="input-block-level ng-pristine ng-valid" ng-switch="" on="localityTypeRadio" ng-hide="form.permitLocality.length"><option value="? string: ?"></option>
    <!-- ngRepeat: county in countyList --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County --><!-- ngSwitchWhen: County -->
    <!-- ngRepeat: city in cityList --><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option><!-- ngSwitchWhen: City --><option ng-switch-when="City" ng-repeat="city in cityList" class="ng-scope ng-binding" value="

                ">

    </option>
    <!-- ngRepeat: town in townList --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town --><!-- ngSwitchWhen: Town -->
</select>

© Stack Overflow or respective owner

Related posts about angularjs

Related posts about angularjs-ng-repeat