2016-07-15 108 views
1

我使用的rorymadden.date-下拉列表爲日期下拉菜單,它包括一個簡單的選擇與結合到幾個月的數組:角插入隨機無用跨度中選擇選項

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

這將打印這個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> 

現在我想插入一個屬性「翻譯」到選項,以使月份可翻譯。

所以我改變選擇這樣:

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

但現在我得到插入無處隨機跨度是打破轉換功能。由此產生的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-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> 

角在做什麼,爲什麼? 我怎樣才能獲得預期的輸出,我希望它是這樣的:

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

任何想法?

回答

0

您還將<option>January</option>更改爲<option>{{month.name}}</option>與month.name的綁定正在爲其功能添加跨度。

你的翻譯插件可能有一個翻譯過濾器,所以使用該選項代替指令:{{month.name | translate}}。這也爲您提供翻譯的正確字符串(「january」),而不是「{{month.name}}」。

+0

那麼,工作。 – Nick

+0

現在ng模型已經不存在了,如何在沒有ng模型的情況下使用ng-change? – Nick