AngularJS：如何在ng-repeat中为变量赋值属性以实现翻译？

问题解答 #

首先明确：你写的ng-repeat="status in statusList; a=status.val"这种语法是无效的，AngularJS的ng-repeat不支持这种分号追加变量赋值的写法，会导致模板解析错误。

下面是几种正确实现需求的方案：

方案1：直接在模板中使用翻译管道（推荐） #

如果项目用了angular-translate这类翻译库，直接给status.val加上翻译管道，和处理translation.status的逻辑保持一致：

<div>
  <label for="status">{{translation.status}}</label>
  <select class="form-control" id="status" ng-model="extraItemForm.status" ng-required="true">
    <option ng-repeat="status in statusList" value="{{status.id}}">
      {{ status.val | translate }}
    </option>
  </select>
</div>

方案2：通过控制器提前处理翻译数据 #

如果需要复用翻译后的结果，或者翻译逻辑比较复杂，可以在控制器里预先处理statusList，给每个状态添加翻译后的属性：

// 控制器中的代码（假设已注入$translate服务）
$scope.statusList = 原statusList数组.map(status => {
  return {
    id: status.id,
    val: status.val,
    translatedVal: $translate.instant(status.val) // 提前完成翻译
  };
});

然后在模板中直接使用预处理好的翻译值：

<option ng-repeat="status in statusList" value="{{status.id}}">
  {{ status.translatedVal }}
</option>

方案3：利用翻译对象直接取值 #

如果translation是一个键值对形式的翻译对象（比如translation['status_active'] = '已激活'），且status.val刚好是对应的键名，那么可以直接通过对象属性访问的方式取值：

<option ng-repeat="status in statusList" value="{{status.id}}">
  {{ translation[status.val] }}
</option>

内容的提问来源于stack exchange，提问作者Dev Man