ng-model 从下拉列表中获取错误值

Question

当某些值在标题处共享开头字母时，在下拉菜单中键入时，我的 ng-model 会更新为第一个值。

 <div ng-app="dropDown" ng-controller="dropDownController">
      <select name="StateId" ng-model="selectedState" class="form-control" ng-change="selectedStateChanged()" ng-options="(states.Abbrev + ' - ' + states.Name) for states in states"></select>
      <span>{{selectedState.Name||''}}</span>
    </div>

Plnkr http://plnkr.co/edit/pLVzK18iJxrmrL9Oiw4b?p=preview

要测试的场景：

1. 单击表格的任何部分。
2. 单击 Tab 以聚焦下拉菜单。
3. 开始输入“TX”

结果： - 'TX - TEXAS' 选项显示在下拉菜单中。 - $scope.selectedState 值为 {Name:'TENNESSEE'}

预期：

• “TX - TEXAS”选项显示在下拉菜单中。
• $scope.selectedState 值应该是 {Name:'TEXAS'}

我将使用普通的 javascript 来解决这个问题，与此同时，我想知道是否有任何 AngularJS 解决方案。

提前致谢。

Answer 1

我也遇到了select 的一些问题。这就是为什么添加一个空的option-tag 总是更安全的原因！

<div ng-app="dropDown" ng-controller="dropDownController">
  <select name="StateId" ng-model="selectedState" class="form-control" ng-change="selectedStateChanged()" ng-options="(states.Abbrev + ' - ' + states.Name) for states in states">
    <option></option>
  </select>
  <span>{{selectedState.Name||''}}</span>
</div>

解决办法：http://plnkr.co/edit/LfS347JM6V7Rv5S6vPkL?p=preview

---

Angular Documentation 解释问题：

如果 ngModel 的 viewValue 与任何选项都不匹配，则控件将自动添加一个“未知”选项，然后在解决不匹配时将其删除。

（可选）可以将值设置为空字符串的单个硬编码元素嵌套到元素中。然后，此元素将表示 null 或“未选择”选项。