AngularJS/Javascript异常现象："? string: ... ?" 与Select默认值加载故障

看起来你遇到的核心问题是JSON中的值和Select选项不匹配，加上可能存在的隐藏字符或Angular内部包装导致的异常值格式，以下是一步步的排查和解决方法：

1. 先排查值的真实格式：是否有隐藏字符？ #

你提到日志显示为"16% "，但获取值时返回"? string:16% ?"，这很可能是值里包含了不可见的非打印字符（比如NBSP非断空格、零宽空格等），或者是Angular对值做了内部包装。

可以在控制台打印每个字符的编码来确认：

// 替换成你的JSON数据字段
const rawValue = yourJsonData.tempPrimeResOwnerPerc;
// 输出每个字符的ASCII编码
console.log("字符编码:", [...rawValue].map(c => c.charCodeAt(0)));

• 普通空格的编码是32，NBSP是160，如果看到其他异常编码，就说明值里有异常字符。

2. 确保Select选项和值完全匹配 #

Select的选中逻辑是严格匹配<option>的value属性，哪怕多一个空格、空格类型不同都会匹配失败，导致显示为空：

• 检查你的选项是否是<option value="16%">16%</option>，而你从JSON拿到的是"16 %"（中间空格）或"16% "（末尾空格），这种情况肯定匹配不上。
• 可以先手动清理值的格式，比如去除前后空格、统一空格：

const cleanedValue = rawValue.trim().replace(/\s+/g, ' '); // 把多个空格换成单个，去除首尾空格

3. 用AngularJS的正确方式绑定（不直接操作DOM） #

既然你用了AngularJS，建议优先用ng-model双向绑定，而不是直接操作DOM，避免框架内部的状态不同步：

<!-- HTML部分 -->
<select id="tempPrimeResOwnerPerc" ng-model="selectedPerc" ng-options="opt.value as opt.label for opt in percOptions">
</select>

// 控制器部分
// 先定义你的选项数组（示例）
$scope.percOptions = [
  { value: "16%", label: "16%" },
  { value: "20%", label: "20%" }
];

// 清理JSON值并匹配选项
const cleanedValue = yourJsonData.tempPrimeResOwnerPerc.trim().replace(/\s+/g, ' ');
const matchedOption = $scope.percOptions.find(opt => opt.value === cleanedValue);
if (matchedOption) {
  $scope.selectedPerc = matchedOption.value;
}

4. 如果必须操作DOM：先处理异常值格式 #

你提到获取值返回"? string:16% ?"，这看起来像是Angular对原始值做了包装（比如某些自定义指令或数据转换导致），可以先把值转成纯字符串再赋值：

const rawValue = yourJsonData.tempPrimeResOwnerPerc;
// 提取纯字符串部分，或者直接转成字符串后清理
const finalValue = String(rawValue).replace(/^\? string:|\?$/g, '').trim();
// 然后赋值
document.getElementById("tempPrimeResOwnerPerc").value = finalValue;
// 或者AngularJS方式
angular.element(document.getElementById("tempPrimeResOwnerPerc")).val(finalValue);

5. 验证赋值是否成功 #

赋值后可以手动检查是否有匹配的选项：

const selectEl = document.getElementById("tempPrimeResOwnerPerc");
const hasMatchingOption = Array.from(selectEl.options).some(opt => opt.value === selectEl.value);
console.log("是否找到匹配选项:", hasMatchingOption);

如果返回false，说明清理后的值仍然和选项不匹配，需要调整选项的value或者进一步处理JSON值。

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