Angular 如何根据当前语言环境从模型中选择字段

Question

AngularJs。我有一个这样的模型

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

所以我想在 html 模板适当的字段中使用。像这样：

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

我可以这样做吗？

Answer 1

更好的是：

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

如果你这样做的话：

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

您将始终呈现 div，如果您使用 ng-if 则仅当表达式 return true

时才会呈现元素

Answer 2

是的，在 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 中，只是它添加了额外的观察者，如果那不是你遇到的问题。

How to choose field from model by current locale in Angular