CODEWITHSUNDEEP
angularjsangular-translate
dragonmnl
dragonmnl

Reputation: 15558

How to nest expressions in AngularJS' views?

I'm using Angular Material together with angular-translate.

Basically when using AM's md-select I have:

<md-select-label>{{ userLanguage ? userLanguage.chosenLanguage: "Choose language"}}</md-select-label>

which shows Choose language if no option was selected or the selected option otherwise.

Finally I use angular-translate to translate all the label (e.g. "Choose language" in multiple languages) in my application's views like:

{{ 'LB_CHOOSE_LANGUAGE' | translate }}

However, when I try to nest the 2 expressions (ternary operator + angular-translate filter) by:

{{ userLanguage ? userLanguage.chosenLanguage : {{ 'LB_CHOOSE_LANGUAGE' | translate }} }}

I get invalid syntax:

Error: [$parse:syntax] http://errors.angularjs.org/1.4.0-rc.2/$parse/syntax

Any clue on how to deal with nested expressions?

Upvotes: 4

Views: 2544

Answers (1)

azium
azium

Reputation: 20634

Handlebar syntax implies a JavaScript expression, or to be specific, an Angular expression. Using handlebars inside handlebars doesn't make sense because you've already told the compiler you're switching from HTML to JavaScript.

That being said, you can just rewrite your expression without the inner handlebars:

{{ (userLanguage ? userLanguage.chosenLanguage : 'LB_CHOOSE_LANGUAGE') | translate }}

Upvotes: 6

Related Questions