Replace string on databind in AngularJS

Question

I'm trying to create a multi-lingual app that fetches the translations via an initial JSON fetch, based on the user's choice.

The translations are working fine, however I need to be able to replace a string with a computed number. For example: "Tim is X% bigger than Tom.", in Spanish it might be something like "Tim es X% más alto que Tom". I need to replace X with a computed number.

Is there an Angular filter that can do this? Something akin to

{{ translation.PhraseOne | replaceXWithY }}

If not, what would be the simplest way of achieving this? I don't really want to be having a translation file with partial strings.

Cheers!

Angular Translate's variable replacement might be of interest https://angular-translate.github.io/docs/#/guide/06_variable-replacement ... also there is more thorough pluralization support if you need - https://angular-translate.github.io/docs/#/guide/14_pluralization — Pavel Horal, Oct 12 '15 at 16:14

score 2 · Accepted Answer · answered Oct 12 '15 at 16:30

You can accomplish this by creating your own custom filter.

angular.module('yourCustomFilter', [])
.filter('replaceXwithY', function() {
    return function(input, placeHolder,desiredValue){
        return input.replace(placeHolder,desiredValue);
    };
})

And in your markup: {{translation.PhraseOne | replaceXwithY: X:Y}}

Replace string on databind in AngularJS

1 Answers1