在Chrome输入字段时，Tab键选择角不改变模型值 [英] Angular select not changing model value when tabbing through input fields in Chrome
问题描述
我遇到，我在Chrome版本39.0.2171.95（64位）在Mac上采用了棱角分明的版本1.2.20看到一个奇怪的问题。当第一次加载页面，如果通过表单我选项卡并更改选择列表的值，选择列表中的模型值不会更新。这里是展示问题上plnkr：
http://plnkr.co/edit/0DFI7w9mcp76kSA3lmwE?p=$p$ PVIEW
按照以下步骤复制：
- 单击在第一个文本字段，然后键入任意值。
- preSS标签
- 键入字母V，所以选择更改为佛蒙特。
- 键入字母v了，所以选择更改为弗吉尼亚。
- preSS Tab键进入下一个文本字段。
注意如何 data.state 仍设置输出为佛蒙特，即使选择列表设置为弗吉尼亚州，这是怎么回事，是有什么办法来解决这个问题？
下面是从plnkr的HTML：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用＆GT; ＆LT; HEAD＆GT;
＆所述;脚本数据需要=angular.js@1.2.20数据semver =1.2.20SRC =的https：//$c$c.angularjs.org/1.2.20/angular.js＆GT ;＆LT; / SCRIPT＆GT;
＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;
＆所述; SCRIPT SRC =的script.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT; ＆LT;身体GT;
＆LT;形式NAME =myForm会NG-的init =状态= ['阿拉巴马'，'亚利桑那，阿肯色州，加州，科罗拉多，康涅狄格，特拉华州'，'哥伦比亚特区'， 佛罗里达，乔治亚，爱达荷，伊利诺伊州，夺宝，衣阿华，堪萨斯州，肯塔基州，路易斯安那州，缅因，马里兰，马萨诸塞州，密歇根州，明尼苏达州，密西西比，密苏里，蒙大拿，内布拉斯加州，内华达州，新罕布什尔，新泽西，新墨西哥，纽约，北卡罗来纳 北达科他州，俄亥俄，俄克拉荷马，俄勒冈州，宾夕法尼亚州，罗得岛，南卡罗来纳，南达科他州，田纳西州，得克萨斯，爵士，佛蒙特州'，'弗吉尼亚'，'华盛顿'，'西弗吉尼亚州，威斯康星，怀俄明]＆GT;
＆LT;输入类型=文本NG模型=data.text1＆GT;
＆LT;选择NG模型=data.stateNG选项=在状态值值跟踪按值＆GT;＆LT; /选择＆GT;
＆LT;输入类型=文本NG模型=data.text2＆GT;
＆LT; /表及GT;
＆LT; DIV＆GT; data.text1 = {{data.text1}}＆LT; / DIV＆GT;
＆LT; DIV＆GT; data.state = {{data.state}}＆LT; / DIV＆GT;
＆LT; DIV＆GT; data.text2 = {{data.text2}}＆LT; / DIV＆GT;
＆LT; /身体GT;＆LT; / HTML＆GT;
看起来这是在角本身的 https://github.com/angular/angular.js/issues/9134 ）。你可以解决它通过添加默认/ null的选项来选择（的http：// plnkr.co/edit/v6XFiQ?p=$p$pview ）
＆LT;选择...＆GT;
＆LT;期权价值=＆GT;选择一个国家...＆LT; /选项＆GT;
＆LT; /选择＆GT;
I've come across a strange issue that I am seeing in Chrome Version 39.0.2171.95 (64-bit) on a Mac using Angular version 1.2.20. When the page first loads, if I tab through a form and change the values of a select list, the select list's model value does not update. Here's a plnkr showing the issue:
http://plnkr.co/edit/0DFI7w9mcp76kSA3lmwE?p=preview
Follow these steps to replicate:
- Click in the first text field and type any value.
- Press Tab
- Type the letter "v" so the select changes to "Vermont".
- Type the letter "v" again, so the select changes to "Virginia".
- Press Tab to enter the next text field.
Notice how the output of data.state is still set to "Vermont", even though the select list is set to "Virginia. Why is this happening and is there any way to fix it?
Here is the HTML from the plnkr:
<!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>
Looks like this is a bug in Angular itself (see https://github.com/angular/angular.js/issues/9134). You can work around it by adding a default/null option to the select (http://plnkr.co/edit/v6XFiQ?p=preview)
<select ...>
<option value="">Pick a state...</option>
</select>
这篇关于在Chrome输入字段时，Tab键选择角不改变模型值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
