angularjs ng-model选择不正确更新

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文档:

可选地,可以将单个硬编码<option>元素(其值设置为空字符串)嵌套到<select>元素中.然后,此元素将表示null"未选择"选项.

更新:浏览器差异

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