CODEWITHSUNDEEP
angularjsangular-translate
Richard
Richard

Reputation: 1041

Angular translate inner content

How to make angular translate work with inner content? By default it removes everything inside the element containing the translate directive.

When using the directive translate to translate stuff, the framework removes everything inside the HTML element. In most cases this is not a problem since, you will want your translation to take all your content. However in some cases it's annoying, for example with labels, see the following plnkr. The following translation will remove the select element.

  <label translate> STATE
    <select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>
  </label>

  <label translate="STATE">
    <select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>
  </label>

https://plnkr.co/edit/wcMuDVMhxH3wbSUTUwtY?p=preview

I am aware that I could use the attribute for or label in this case to solve the problem in this particular case, but I'm after a general solution.

Upvotes: 0

Views: 785

Answers (2)

nandermind
nandermind

Reputation: 19

i think you can try this instead

 <label> {{'STATE'|translate}} </label>
<select ng-model="selectedItem" ng-options="item.name |translate for item in items track by item.id"></select>

works like charm on my side

p.s : i cant edit your plunker due to my internet connection issue. but I tested what I ust done like above and it works well on my side as long as the translations json is matched with your options

edit : sorry. i forgot to put close tag of label :'(

Upvotes: 0

Heri Hehe Setiawan
Heri Hehe Setiawan

Reputation: 1633

The for attribute you mentioned about is a good way to go, in fact it is the correct and semantic way of doing it:

<label for="state" translate>STATE</label>
<select 
    ng-model="selectedItem" 
    ng-options="item.name for item in items track by item.id" 
    id="state"></select>

Upvotes: 0

Related Questions