AngularJS 条件选项

Question

我有一个可以翻译成法语和英语的应用程序 angular。我正在使用 angular 翻译来做到这一点。问题是：我从 API 收到一个对象数组，在这些对象中，我有一个属性 bookConditionEn 和一个属性 bookConditionFr 等ids.

在 select 输入中，我想根据当前语言显示 bookCondition。

在控制器中，我可以通过 $translate 服务获取当前语言

            vm.getCurrentLanguage = function() {
                return $translate.use();
            }

所以，我想知道是否可以在视图中使用 ng-option 中的条件。

    <select 
      ng-options="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
      ng-model="bookCtrl.bookConditions" 
      name="Condition" class="form-control" 
    ></select>

Answer 1

您可以通过更改创建 <select>:

的方式将条件语句用于 show/hide 选项

<select ng-options=ng-model="bookCtrl.bookConditions" name="Condition" class="form-control">
    <option 
        ng-repeat="bookCondition.BookCondition for bookCondition in bookCtrl.bookConditions"
        ng-if="vm.getCurrentLanguage==bookCondition.language"
    >
</select>

我不太明白你是如何设置 JSON 的，所以我假设你有一个包含语言 (bookCondition.language) 的属性。您可以将其与 vm.getCurrentLanguage 返回的用户当前选择的语言进行比较。顺便说一句，我建议将其从函数更改为像这样的变量：

vm.currentLanguage = $translate.use();

这应该是您以有条件的方式指定选项所需要做的全部工作。

Answer 2

按您的方式行事

                <select ng-model="bookCtrl.bookCondition" name="Condition" class="form-control">
                    <option ng-if="bookCtrl.getCurrentLanguage() === 'en'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookCondition}}</option>
                    <option ng-if="bookCtrl.getCurrentLanguage() === 'fr'" ng-repeat="bookCondition in bookCtrl.bookConditions" value="{{bookCondition}}">{{bookCondition.BookConditionFr}}</option>
                </select>

AngularJS 条件选项

AngularJS conditional ng-option

html

angularjs

ng-options

angularjs-ng-options