AngularJS静态选项select绑定ng-model无法选中问题

你碰到的这个问题其实挺常见的，核心原因是HTML原生的option标签的value属性只会存储字符串值，而你的ng-model绑定的是布尔类型的true/false。AngularJS在匹配选项和model值的时候会做严格的类型校验，字符串的"true"/"false"和布尔值的true/false是完全不同的类型，自然没办法匹配上，所以选项就不会被选中。

下面给你几个可行的解决方案，按推荐程度排序：

方案1：用ng-value替代原生value #

这是最直接也最优雅的解决方式，ng-value是AngularJS提供的指令，它可以直接把表达式的结果（这里就是布尔值）作为选项的实际值，让选项值和model的类型完全匹配。修改后的代码如下：

<select class="modal-textboxes" ng-model="vm.reportPresets.selectedPreset.systemWideAccess">
  <option ng-value="false">User</option>
  <option ng-value="true">System Wide</option>
</select>

这样修改后，当vm.reportPresets.selectedPreset.systemWideAccess是布尔值true或false时，对应的选项就会被正确选中了。

方案2：使用ng-options生成选项 #

如果你的选项后续可能需要动态调整，或者想让数据和视图分离，用ng-options会更符合AngularJS的开发风格。

首先在控制器里定义选项数据：

// 假设这是你的控制器代码
vm.accessOptions = [
  { label: 'User', value: false },
  { label: 'System Wide', value: true }
];

然后在视图里使用ng-options：

<select class="modal-textboxes" 
        ng-model="vm.reportPresets.selectedPreset.systemWideAccess"
        ng-options="option.value as option.label for option in vm.accessOptions">
</select>

这种方式不仅能解决类型不匹配的问题，还让选项的维护更灵活，后续要加新选项或者修改文本，只需要修改控制器里的数组就行。

方案3：将model值转换为字符串（不推荐） #

如果你暂时不想修改视图代码，也可以在控制器里把布尔值转换成对应的字符串，比如：

// 赋值时把布尔值转成字符串
vm.reportPresets.selectedPreset.systemWideAccess = yourBooleanValue ? "true" : "false";

不过这种方法不推荐，因为会把model的类型从布尔值改成字符串，后续如果有其他逻辑依赖布尔值判断的话，很容易出现意料之外的bug。

总的来说，方案1是最快解决问题的方式，方案2则更适合长期维护的项目。

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