Is it possible to run an ng-switch directly on a select > option
- by Asok
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>