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 ?

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

+ira 's solution works for me.

<input type ='text' placeholder = "{'USERNAME' | translate}">

where username is the key for the translation. So that translation JSON line might look like the following in Spanish

"USERNAME": "Nombre",

The two together puts Nombre as a placeholder inside the input box

I Use this method:

In en.json:

{
   "ENTER_TEXT": "{{label}} را وارد کنید",
   "DISCOUNT_CODE": "کد تخفیف"
}

In template:

<input type="text" placeholder="{{'ENTER_TEXT' | translate: {label: 'DISCOUNT_CODE' | translate} }}" >

来源：https://stackoverflow.com/questions/21025277/how-to-translate-the-html5-placeholders-dynamically

标签