ng模型从下拉菜单中得到错误的值

ng-model is getting wrong value from dropdown

本文关键字：错误 模型 下拉菜单 ng      更新时间：2023-09-26

我的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"选项。——美元范围。选择的状态值是{Name:'TENNESSEE'}

预期:

  • 'TX - TEXAS'选项显示在下拉菜单中。
  • 美元范围。selectedState值应该是{Name:'TEXAS'}

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

我在select上也遇到了一些问题。这就是为什么添加一个空的option标签总是更安全的原因!

<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文档解释了这个问题:

如果ngModel的viewValue不匹配任何选项，那么控件将自动添加一个"未知";选项，然后在解决不匹配时将其删除。

可选地，单个硬编码元素，其值设置为空字符串，可以嵌套到元素中。然后，该元素将表示null或"未选定"。选择。

相关文章：