Angularjs在代码隐藏中翻译

时间:2014-02-17 13:35:07

标签: angularjs typescript angular-translate

我正在努力将enum类绑定到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')
    },

使用angular-translate。

2 个答案:

答案 0 :(得分:1)

这是我发现的最好的东西,并且仍然在我的项目中用于绑定值以选择组件。在这里,我有一个部门名单。

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

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

希望它能够解决你所面临的问题。

答案 1 :(得分:0)

如果您手动声明值,请尝试这种方式

  <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();
               });