AngularJS中ng-model值无法在<select>中显示的问题排查

先看你的核心HTML代码：

<label class="item item-input item-stacked-label" ng-repeat="nl in normativas">
  <select ng-model="nl.idResultado">
    <option value="1">OK</option>
    <option value="2">NOT</option>
    <option value="3"> MAYBE </option>
  </select>
</label>
<button ng-click="guardarNormativas()"> Guardar</button>

你碰到的问题根源很明确：AngularJS的ng-model匹配是严格相等（===）校验，这里大概率是「数据类型不匹配」导致的下拉框无法默认选中。

为啥创建视图正常，编辑视图不行？ #

创建视图时，你从空数组开始选择选项，此时nl.idResultado会被AngularJS设置为字符串类型（因为HTML里<option>的value属性本质就是字符串）。如果你的保存逻辑把这个字符串转成了数字存入SQLite，那么从数据库取出时nl.idResultado会是数字类型——数字1和字符串"1"用===比较是不相等的，自然无法匹配到对应的选项。

解决方法（选其一即可） #

方法1：用ng-value指定数字类型（推荐）

把<option>的value换成ng-value，让AngularJS直接把值当成数字绑定，和你从数据库取出的数字类型完全匹配：

<label class="item item-input item-stacked-label" ng-repeat="nl in normativas">
  <select ng-model="nl.idResultado">
    <option ng-value="1">OK</option>
    <option ng-value="2">NOT</option>
    <option ng-value="3"> MAYBE </option>
  </select>
</label>
<button ng-click="guardarNormativas()"> Guardar</button>

方法2：把数据库返回的idResultado转成字符串

如果不想修改HTML，可以在获取数据库数据后，统一把每个nl.idResultado转成字符串，和HTML里的option value类型对齐：

// 假设从数据库拿到的原始数据是dbNormativas
$scope.normativas = dbNormativas.map(item => {
  item.idResultado = item.idResultado.toString();
  return item;
});

方法3：保存时把idResultado转成字符串

在guardarNormativas()函数里，先把选中的数值转成字符串再存入数据库，这样取出的字符串就能和HTML里的value直接匹配：

$scope.guardarNormativas = function() {
  $scope.normativas.forEach(nl => {
    nl.idResultado = nl.idResultado.toString();
  });
  // 执行SQLite保存逻辑
};

不确定类型的话，可以在编辑视图的label里加个调试输出：{{nl.idResultado + ' 类型：' + typeof nl.idResultado}}，就能直观看到是数字还是字符串，再针对性选解决方法。

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