如何在Angular中按当前区域设置从模型中选择字段

Question

AngularJs。 我有这样的模型

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

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

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

我能这样做吗？

Answer 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中，如果这不是你的问题。

Answer 2

更好的是：

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

如果你这样做的话：

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

如果使用ng-if then元素将仅在表达式返回true时呈现