I'm using angular-translate to translate the page content in to different languages.
<input type ='text' placeholder = ' {username | translate}'>
This works fine when the page loads ..but it fails to translate when I use $translate.uses('fr')
depending upon language dropdown changes.
Can any one kindly suggests the solution to translate the placeholders while the language changes dynamically ?
A placeholder is meant to describe the generic pattern of expected input, not some specific value. If you have a useful default value e.g. from previous input, make it the default by putting it into the value attribute (property) and omit the placeholder attribute as not needed.
Some placeholders will include actual words, such as {{MoreInfoButton/}} to describe what the placeholder refers to. However, when translating, the entire placeholder (including any actual words that you would normally translate if they were not in a placeholder) should be kept intact and untranslated.
A placeholder in programming code may also be used to indicate where specific code needs to be added, but the programmer has not yet written the code. The placeholder reminds the programmer where to add code, or can let other programmers know that additional code still needs to be added in general.
Did you try:
<input type="text" placeholder="{{ 'my.i18n.key' | translate }}" ng-model="myModel">
There is a directive in angular-translate to help with this. See this issue.
<input placeholder="Regular Placeholder" translate translate-attr-placeholder="text" translate-value-browser="{{app.browser}}">
Here is a preview of a working plunkr from that thread: http://plnkr.co/edit/J4Ai71puzOaA0op7kDgo?p=preview
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With