CODEWITHSUNDEEP
javascriptangularjspaginationangular-ui-bootstrapangular-translate
DaCh
DaCh

Reputation: 931

translate angular-ui's pagination text angularjs

i'm been working one a webpage where i use angularjs and angular-ui. And i use the pagination from angular-ui. Now i need to change the next and previous button text after what language $translate are assigned to. I tried to do it inline like this 

 <pagination previous-text="{{'PREVIOUS' | translate}}" </pagination>

I also try doing it from my controller, but still no luck.

But it seems like i can't ref to the translate scope. Anyone that have done something similar

--- Update ---

Think i need to something like the answer here . But then the qustion is. how can i ref to the translatesion here like i do in the above code.

it's something like thie?

paginationConfig.previousText = 'PREVIOUS' | translate;

Or like this?

paginationConfig.previousText = 'PREVIOUS' | $translateProvider;

does this make anysens to you guys? or do i have to explain in a other way

Upvotes: 0

Views: 2098

Answers (2)

DaCh
DaCh

Reputation: 931

I'm still not sure why i can't ref to the translation module inline the pagination tags but if i inject the translation module into my controller, i can then look up the values an insert them into a scope variable, and then ref to it from html

Like shown below

Angular/Controller

$scope.previousText;
$scope.nextText;

$translate(['PREVIOUS', 'NEXT']).then(function (translations) {
    $scope.previousText = translations.PREVIOUS;
    $scope.nextText = translations.NEXT;
});

Html

<pagination previous-text="{{previousText}}" next-text="{{nextText}}"></pagination>

And it works. Anyway, I'm gonna let this hang for a couple of days, and if no one comes up with the theory that explains this after the time limit, i'm gonna accepted this. Thanks you all for your time and help

Upvotes: 1

coderocket
coderocket

Reputation: 584

Have you added all your translations to the $translationProvider?

app.config(function ($translateProvider) {
  $translateProvider.translations('en', {
    PREVIOUS: 'previous',
  });
  $translateProvider.translations('de', {
    PREVIOUS: 'vorherige',
  });
  $translateProvider.preferredLanguage('en');
});

Sorry, I'm not allowed to comment...

Upvotes: 0

Related Questions