How to choose field from model by current locale in Angular

AngularJs. I have a model like this

animal: {name_en: "cat", name_de: "Kater", name_ru: "кот"}

So I want to use in html template appropriate field. Something like this:

<div>{{ if(locale == 'en') animal.name_en }}</div>

Can I do that?

Solution

Yes, one can easily do that in AngularJS.

Putting a hardcoded check would be difficult to scale when you'll have a lot of animals to handle :)

So, modifying a bit of your structure. Have the animals to be an array of Objects. Something like:

$scope.animals = [{name: "ABC", locale: "en"}, {name: "XYZ", locale: "de"}];

Assuming you have en as selected locale

$scope.selectedlocale = 'en';

Now, just iterate over the animals Array and render accordingly:

<div ng-repeat="animal in animals">
    <div ng-if="animal.locale === selectedLocale">
        {{ animal.name }}
    </div>
</div>

Note

ng-show - let the element to be in DOM but hidden if condition fails

ng-if - let the element not to be in DOM if condition fails just that it adds extra watchers, if that isn't the problem you have.