Nick Nick - 4 months ago 32
AngularJS Question

Angular inserts random unwanted spans in select options

I am using the rorymadden.date-dropdowns for the date dropdowns which includes a simple select with binds to an array of months:

<select name="dateFields.month" data-ng-model="dateFields.month" placeholder="Month" class="form-control" ng-options="month.value as month.name for month in months" ng-change="checkDate()" ng-disabled="disableFields">
<option ng-show="!dateFields.month" value="" translate="yes">#Apply.Month</option>
</select>


This prints this HTML:

<select name="dateFields.month" data-ng-model="dateFields.month" placeholder="Month" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" ng-options="month.value as month.name for month in months" ng-change="checkDate()" ng-disabled="disableFields">
<option ng-show="!dateFields.month" value="" translate="yes" class="ng-hide" selected="selected"><span class="ng-scope">Month Test</span></option>
<option value="number:1" label="January">January</option>
<option value="number:2" label="February">February</option>
<option value="number:3" label="March">March</option>
<option value="number:4" label="April">April</option>
<option value="number:5" label="May">May</option>
<option value="number:6" label="June">June</option>
<option value="number:7" label="July">July</option>
<option value="number:8" label="August">August</option>
<option value="number:9" label="September">September</option>
<option value="number:10" label="October">October</option>
<option value="number:11" label="November">November</option>
<option value="number:12" label="December">December</option>
</select>


Now I want to insert an attribute "translate" into the option in order to make the months translatable.

So I change the select to this:

<select name="dateFields.month" data-ng-model="dateFields.month" placeholder="Month" class="form-control" ng-change="checkDate()" ng-disabled="disableFields">
<option ng-show="!dateFields.month" value="" translate="yes">#Apply.Month</option>
<option ng-repeat="month in months" value="{{month.value}}" translate="yes">{{month.name}}</option>
</select>


But now I get random spans inserted out of nowhere that break the translation functionality. The resulting HTML is this:

<select name="dateFields.month" data-ng-model="dateFields.month" placeholder="Month" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" ng-change="checkDate()" ng-disabled="disableFields">
<option ng-show="!dateFields.month" value="" translate="yes" class="ng-hide"><span class="ng-scope">Month Test</span></option>
<!-- ngRepeat: month in months -->
<option ng-repeat="month in months" value="1" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.January</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="2" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.February</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="3" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.March</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="4" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.April</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="5" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.May</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="6" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.June</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="7" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.July</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="8" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.August</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="9" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.September</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="10" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.October</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="11" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.November</span></option>
<!-- end ngRepeat: month in months -->
<option ng-repeat="month in months" value="12" translate="yes" class="ng-scope"><span class="ng-binding ng-scope">#Common.December</span></option>
<!-- end ngRepeat: month in months -->
</select>


What on earth is Angular doing and why?
How can I get the expected output which I want it to be like this:

<option ng-repeat="month in months" value="1" translate="yes" class="ng-scope">#Common.January</option>


Any ideas?

Answer

You also changed <option>January</option> to <option>{{month.name}}</option> that binding to month.name is adding the span for its functionality.

Your translation plugin probably has a filter for translation, so use that instead of directive on the option: {{month.name | translate}}. That also gives you the correct string ("january") for translation, instead of "{{month.name}}".

Comments