angularjs ng-model 选择未正确更新

Question

我有一个非常简单的表单，其中包含所有状态 + 缩写的选择。在某些情况下，使用键盘导航第二个按键不会更改 ng-model 值。例如，如果您选择选择元素并点击 T，它将正确选择田纳西州，TN 将被放入 ng-model。再次点击向下箭头或 T 会将显示的值更新为 Texas，但 ng-model 仍设置为 TN。奇怪的是，如果它有 2 个不同的字母，则不会发生这种情况，因此 T 后跟 A 正确地将 AL 放入 ng-model。

HTML 如下所示：

<div>
    <label for="user_city">City</label>
    <input type="text" name="user_city" id="user_city" ng-model="user.city" />
    <label for="user_state">State*</label>
    <select name="user_state" id="user_state" ng-model="user.state" style="width: 228px" required>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

这是一个演示问题的 jsfiddle：http://jsfiddle.net/cKF6Q/2/

要复制，请单击城市框，然后按 TAB 使选择框聚焦并键入 T T。您将看到 user.state 在第一次按 T 时转到 TN，但第二个被忽略。

注意：这只是第二次按键，因此您必须在测试之间重新加载页面。

Answer 1

我遇到了完全相同的问题。这是jsFiddle - 第一个下拉菜单已“修复”，第二个没有（仅用于演示）。

<div ng-app>
    <input type="text" name="name" ng-model="form.name" />
    <select name="expirationMonth" ng-model="form.expirationMonth">
        <option value="">--</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
    </select>
    <select name="expirationYear" ng-model="form.expirationYear">
        <option>2014</option>
        <option>2015</option>
        <option>2016</option>
        <option>2017</option>
    </select>

    <pre>{{ form | json }}</pre>
</div>

我用向下箭头键注意到了它。我点击该字段并按向下箭头。第一次按键更新模型。第二次按键更新表单元素但不更新模型。第三次按键以及之后的每一次按键都会按照您的预期更新模型。

修复

在列表顶部添加一个带有空白值的额外选项。通过将值设为空白，它不会干扰表单验证（例如，根据需要标记字段）。此外，AngularJS 确实允许您在绑定到数组时包含一个静态选项。来自AngularJS docs：

（可选）单个硬编码 <option> 元素，其值已设置 到一个空字符串，可以嵌套到<select> 元素中。这 然后元素将代表null 或“未选择”选项。

更新：浏览器差异

我注意到 Chrome 会在每次按下向下箭头时更新模型的显示（显然，当静态默认选项不存在时，第二次按键除外）。 Chrome 是我写小提琴时使用的浏览器。另一方面，Firefox 不会更新模型的显示，直到 i 选项卡或单击字段外。 Internet Explorer 11 会“即时”更新模型，类似于 Chrome，但我无法在 IE 11 上重现此“第二次按键问题”。我没有任何其他浏览器可供测试。