AngularJS中Typeahead字段无法正常显示非英文字符如何解决

该问题通常是全链路字符编码不统一导致的，按以下步骤排查修复即可：

1. 服务端编码校验 #

• 先验证接口返回的原始数据是否正常：打开浏览器控制台的网络面板，找到对应数据接口的响应内容，如果原始响应里的ô已经显示为问号，说明问题出在服务端，无需修改前端配置
• 要求服务端确保接口响应头明确携带Content-Type: application/json; charset=utf-8，未指定编码时浏览器会默认使用系统兼容编码解析，导致特殊字符转义为问号
• 确认服务端数据存储层（数据库、缓存）的编码统一为UTF-8，避免数据写入阶段就出现字符丢失

2. 前端全局编码配置 #

• 确认项目入口HTML的head标签内已添加UTF-8声明：

<meta charset="UTF-8">

• 检查AngularJS $http服务的自定义配置：如果你手动修改过responseTransformers响应转换器，确认自定义逻辑没有对特殊字符做错误转码操作，AngularJS默认的响应解析是支持UTF-8特殊字符的

3. Typeahead组件配置修正 #

如果你使用的是ui-bootstrap的uib-typeahead组件，检查以下配置：

• 不要对typeahead的展示字段做多余的转义处理：比如错误使用ng-bind-html加不安全的过滤逻辑，会导致特殊字符被替换
• 不要在typeahead的数据源处理逻辑中调用escape()方法处理字符串，该方法对非ASCII字符的兼容有缺陷，如有编码需求请替换为encodeURIComponent()
• 标准无额外转义的typeahead用法示例：

<input type="text" 
       ng-model="selectedItem" 
       uib-typeahead="item.label for item in fetchOptions($viewValue)">

4. 兜底修复方案 #

如果以上配置都确认正常仍有显示问题，可以在拿到服务端返回数据后，手动对展示字段做UTF-8兼容转码：

// 转码方法
function utf8Decode(str) {
  return decodeURIComponent(escape(str));
}

// 调用示例：服务端返回数据后处理要展示的字段
$scope.fetchOptions = function(keyword) {
  return $http.get('/api/options', {params: {keyword: keyword}})
    .then(function(res) {
      return res.data.map(function(item) {
        item.label = utf8Decode(item.label);
        return item;
      });
    });
}

内容的提问来源于stack exchange，提问作者Sourabh Maheshwari