Как выбрать поле из модели по текущей локали в Angular

0

AngularJs. У меня есть такая модель

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

Поэтому я хочу использовать в соответствующем поле шаблона html. Что-то вроде этого:

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

Я могу это сделать?

Теги:
locale
translation
internationalization

2 ответа

1
Лучший ответ

Да, это легко сделать в AngularJS.

Поставить жестко запрограммированную проверку будет сложно масштабировать, когда у вас будет много животных для обработки :)

Итак, изменив немного вашей структуры. Попросите animals быть массивом объектов. Что-то вроде:

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

Предполагая, что у вас есть en как выбранная локаль

$scope.selectedlocale = 'en';

Теперь просто проведите по массиву animals и выполните соответственно:

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

Заметка

ng-show - пусть элемент находится в DOM, но скрыт, если условие не выполнено

ng-if - пусть элемент не должен находиться в DOM, если условие терпит неудачу только в том, что он добавляет дополнительных наблюдателей, если это не проблема, которую вы имеете.

  • 0
    Спасибо, думаю, что это сработает. Но как вы получаете текущую локаль? Сейчас я пытаюсь использовать момент, но он всегда возвращает язык по умолчанию.
  • 1
    Вы можете явно установить его в en и предоставить раскрывающийся список, в котором пользователь может выбрать свой собственный и, соответственно, обновить свои представления. Второй вариант - использовать: navigator.language или moment.locale();
Показать ещё 1 комментарий
0

Лучше было бы:

<div ng-if="locale == 'en'">{{animal.name_en}}</div>

Если вы сделаете это следующим образом:

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

У вас всегда будет отображаться div, если вы используете ng-if, тогда элемент будет отображаться только тогда, когда выражение return true

Ещё вопросы

Сообщество Overcoder
Наверх
Меню