Question

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

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.您将在第一次按T时看到user.state转到TN，但忽略第二个。

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

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>元素中。这个然后，element将代表null或“未选中”选项。

更新：浏览器差异

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

angularjs ng-model选择不正确更新

1 个答案:

修复

更新：浏览器差异