Angularjs 在代码隐藏中翻译答案

【问题标题】：Angularjs translate in code-behindAngularjs 在代码隐藏中翻译
【发布时间】：2014-02-17 13:35:07
【问题描述】：

我正在努力将枚举类绑定到 SELECT 语句。

给定 TypeScript 定义：

enum SearchCriteria {
  expensive = 0,
  cheap = 1,
  interesting = 2,
  newest = 3
}

及用法：

<div id="searchResultSort">
            {{'sort' | translate}}:
            <select 
                    ng-model=" options.selectedCriteria">
                <option value="0"> {{'sortByExpensive' | translate}}</option>
                <option value="1"> {{'sortByCheap' | translate}}</option>
                <option value="2"> {{'sortByInteresting' | translate}}</option>
                <option value="3"> {{'sortByNewest' | translate}}</option>
            </select>
        </div>

现在这段代码有几个问题：

1) 枚举值是硬编码的

2) 默认值功能不起作用 - 我将此错误跟踪到 angularjs 处理这种情况的方式。它使用比较 === 因此“0”！== 0。 Initial ng-model value not set in select

我不介意通过在控制器中创建具有两个属性的新数组来解决这个问题：{translatedVal, enumId}。

问题是，我如何让这个“translatedVal”与真正的翻译保持同步？

sortingOptions: [
    {
        val: SuperSearch.Repository.Model.SearchCriteria.cheap,
        translation: bindAndInterpolateLanguage('languageKey')
    },

使用角度平移。

【问题讨论】：

您是否考虑过改用ng-options (docs.angularjs.org/api/ng/directive/select)？这将使您能够将值直接绑定到数字（1 与“1”）

标签： angularjs typescript angular-translate

【解决方案1】：

这是我发现并仍在我的项目中用于将值绑定到选择组件的最佳方法。在这里，我有一个部门列表。

<select data-ng-model="selectedDepartment"   
data-ng-options="dept.DepartmentId as dept.Title for dept in departments"   
data-ng-change="onDepartmentChange()" />

您可以随时访问和操作“selectedDepartment”的值。

希望它能提供一些想法来解决您面临的问题。

【讨论】：

我需要以某种方式将翻译与此结合起来
@Erti-ChrisEelmaa 您可以在ng-options 中使用translate 过滤器来更改显示为选项标签的内容。我已经编辑了 Manish 的答案来演示。

【解决方案2】：

如果你手动声明值，那么试试这种方式

  <select class="form-control input-lg" ng-model="selectedSearchCriteria" ng-change="changeTenant(this.selectedSearchCriteria)" required ng-options="i.ToString() for i in SearchCriteria"></select> 

var SearchCriteria=[{
          "expensive":0},
          {"cheap" : 1},
          {"interesting" : 2},
          {"newest" : 3}]        
         $scope.selectedSearchCriteria = SearchCriteria[0];

如果您使用 ajax 调用从服务器端获取值，请尝试以下方式

 <select class="form-control input-lg" ng-model="selectedSearchCriteria" ng-change="changeTenant(this.selectedSearchCriteria)" required ng-options="i.ToString() for i in SearchCriteria"></select> 

             $http.get(URL)
               .success(function (response) {
                   $scope.SearchCriteria= response;
                   $scope.selectedSearchCriteria = response[0];
                   $scope.$apply();
               });

【讨论】：