Angular translate filter in ternary operator

javascript angularjs angular-translate
Luchnik picture Luchnik · Sep 21, 2017 · Viewed 8.5k times · Source

I'm trying to translate my project into another language. I used angular translate library and provided an external JSON file with the translations. It looks like this:

{
  "hello_world": "Hola Mundo"
}

When I'm using it with simple hardcoded strings it works just fine and I get my correct translations:

<p>{{ "hello_world" | translate }}</p>

But how to deal with the ternary operator in code like this?

<button> {{ conditionValue ? 'Show' : 'Hide' }} </button>

How to change those 'Show' and 'Hide' values into a translation filter with Angular Translate? I tried different ways but I got an invalid syntax errors. Thanks!

Answer

Suren Srapyan picture Suren Srapyan · Sep 21, 2017

I think if you wrap the ternary operator into (), it will work.

<button> {{ ( conditionValue ? 'Show' : 'Hide' ) | translate }} </button>

Related questions

Correct use for angular-translate in controllers

I'm using angular-translate for i18n in an AngularJS application. For every application view, there is a dedicated controller. In the controllers below, I set the value to be shown as the page title. Code HTML <h1>{{ pageTitle }}&…

Read More
Exposing the current state name with ui router

I'm trying to implement a language switcher where if a user clicks on "de" from any given page on an "en" side - it takes them to that page of the "de" side. If I console.dir the $state parameter, …

Read More
Angular Translate HTML tags

I know this has been asked here before but none of the answers seem to work for my case I bought this theme Angle which is working with Angular 1.4.2 and Angular translate 2.6.0 (even updated to last 2.7.2) The template by default …

Read More