Question

我在使用Angular版本1.2.20的Mac上在Chrome版本39.0.2171.95（64位）中看到了一个奇怪的问题。首次加载页面时，如果我选中表单并更改选择列表的值，则选择列表的模型值不会更新。这是一个显示问题的人：

http://plnkr.co/edit/0DFI7w9mcp76kSA3lmwE?p=preview

按照以下步骤进行复制：

单击第一个文本字段并键入任何值。
按Tab
键入字母＆＃34; v＆＃34;所以选择更改为＆＃34; Vermont＆＃34;。
键入字母＆＃34; v＆＃34;再次，所以选择更改为＆＃34;弗吉尼亚＆＃34;。
按Tab键进入下一个文本字段。

注意data.state的输出仍然设置为＆＃34; Vermont＆＃34;，即使选择列表设置为＆＃34; Virginia。为什么会发生这种情况，有没有办法解决它？

这是来自plnkr的HTML：

<!DOCTYPE html>
<html ng-app>

  <head>
    <script data-require="angular.js@1.2.20" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <form name="myForm" ng-init="states = ['Alabama', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Florida', 'Georgia', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming']">
      <input type="text" ng-model="data.text1">
      <select ng-model="data.state" ng-options="value for value in states track by value"></select>
      <input type="text" ng-model="data.text2">
    </form>
    <div>data.text1 = {{ data.text1 }}</div>
    <div>data.state = {{ data.state }}</div>
    <div>data.text2 = {{ data.text2 }}</div>
  </body>

</html>

Answer 1

看起来这是Angular本身的一个错误（请参阅https://github.com/angular/angular.js/issues/9134）。您可以通过向select（http://plnkr.co/edit/v6XFiQ?p=preview）

添加default / null选项来解决此问题

<select ...>
  <option value="">Pick a state...</option>
</select>

在Chrome中通过输入字段进行制表时，Angular选择不更改模型值

1 个答案: