2014-02-12 47 views
3

我試圖實現一個多語言的文本輸入字段與左下方的一個下拉按鈕選擇語言。例如,當下拉菜單顯示「de」時,文本字段應該綁定到model.multilingualData['de'].someField等等。angularjs與ngmodel的多語言文本字段

我的第一種方法是將ngModel設置爲model.multilingualData[selectedLanguage].someField。但是,當用戶選擇不同的語言而沒有正確填寫字段時,表單上不會設置錯誤,因爲模型現在指向不同的對象。

我的下一個想法是創建一個沒有ngModel的整個元素指令,但是我不能像ngMaxLength一樣進行其他驗證。

我在網上找不到任何有用的東西。任何想法如何正確實施這一點?

編輯

這裏是一個說明該問題的小小提琴:http://jsfiddle.net/FZ2kg/

不僅如此形式,當你切換語言看起來是有效的,以前的字段值也被刪除,因爲模型設定到null當字段變得無效。

+0

你認爲你可以把JSFiddle放在一起來說明問題嗎? – Lukas

回答

3

會很好,如果你使用這個真棒外部指令的多語言!

https://angular-translate.github.io/

我希望它能幫助

+0

感謝您的提示。我簡短地看了一下,但似乎沒有任何幫助。我不想翻譯字符串,我正在尋找讓用戶翻譯數據庫記錄的方法。 – user2323470

+0

您發佈的鏈接已經死了,同時 – steven

+1

可能很容易找到,如果你在谷歌搜索angular-translate :) –

0

如果您需要爲所有語言的變化形式驗證和你加載所有的語言在你的模型一次,你就不能創建每一個輸入語言形式並隱藏除當前所選語言之外的所有語言?

這裏有一個小提琴:http://jsfiddle.net/jvl70/w3rstmwd/5/

<form name="myForm">   
    <div ng-repeat="(lang, value) in model.multilingualData" 
    ng-show="lang==stuff.currentLanguage">    
     <ng-form name="innerForm"> 
      <div ng-class="{ 'has-error': innerForm.anything.$invalid }"> 
       <input type="text" name="anything" ng-model="value.someField" ng-maxlength="6"/> 
      </div> 
     </ng-form> 
    </div>   
</form> 

(起初我試圖使用動態名稱爲每個輸入,但發現個別領域$無效不可用動態命名的輸入,看到這個帖子就搞定了。周圍:。Dynamic validation and name in a form with AngularJS 作爲替代NG-形式,你可以爲每個輸入使用動態名稱,並嘗試鏈接上的自定義指令之一)

我想,如果有許多可能的語言,這種方法可能變慢,但可以使用幾種語言。