Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to translate the html5 placeholders dynamically

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 ?

like image 423
praveenpds Avatar asked Jan 09 '14 16:01

praveenpds


People also ask

How do I change a dynamic placeholder?

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.

Should placeholders be translated?

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.

What is placeholder code?

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.


2 Answers

Did you try:

<input type="text" placeholder="{{ 'my.i18n.key' | translate }}" ng-model="myModel"> 
like image 69
DrDyne Avatar answered Sep 25 '22 00:09

DrDyne


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

like image 43
armyofda12mnkeys Avatar answered Sep 21 '22 00:09

armyofda12mnkeys