CODEWITHSUNDEEP
htmlangularjsangularjs-interpolate
leandronn
leandronn

Reputation: 170

AngularJS interpolation issue with translate service

I have this ternary operator in my html (working correctly)

{{ qp.QP_TRANSFERS === '1' ? qp.QP_TRANSFER_TYPE_NAME + ' transfer' : 'No transfer' }}

I'm using translation service from json objects. This is an example of en_US.json file:

"myquotes": {
"PAGETITLE": "My quotes",
"DESCRIPTION": "List of all your asked quotes",
"packages": {
    "label": {
      "SEARCH": {
        "TITLE": "Package quotes",
        "DESCRIPTION": "Search by any column",
      "QUOTE": "Quote",
      "ADULTS": "Adults",
      "MINORS": "Minors",
      "TRANSFER": "transfer",
      "NOTRANSFER": "No transfer"
      }
    },
  }
}

And I use it like this:

{{ 'myquotes.packages.label.ADULTS' | translate }}

Is there a way to use this service in my ternary example?

Upvotes: 0

Views: 143

Answers (1)

Matias Fernandez Martinez
Matias Fernandez Martinez

Reputation: 1885

In this plunker you have a working example of what I understand you are looking for. You basically you have use parenthesis to wrap your ternary expression ( ... ) before you use the translate filter, but I recommend you to put that logic inside a function on your controller to have a more readable template:

      <p>{{ ('myquotes.packages.label.SEARCH.' + (qp.QP_TRANSFERS === '1' ? 'TRANSFER' : 'NOTRANSFER')) | translate}}</p>

Or:

 <p>{{ getLabel(qp.QP_TRANSFERS) | translate}}</p>

Other option could be to use the ng-init directive to initilize the full string Key once into a variable and then use the translatefilter against that variable, something like this:

<p 
   ng-init="LABEL = 'myquotes.packages.label.SEARCH.' +
                    (qp.QP_TRANSFERS === '1' ? 'TRANSFER' : 'NOTRANSFER')">
  {{ LABEL | translate}}
</p>

Upvotes: 1

Related Questions