由于运行Javascript - AngularJS，Firefox select下拉列表保持刷新/恢复默认选项
[英]Firefox select dropdown keeps refreshing/reverting to default option due to running Javascript - AngularJS
问题描述
I'm building an app in AngularJS and am having trouble with select dropdown menus when using Firefox. 
我正在AngularJS中构建一个应用程序，在使用Firefox时遇到选择下拉菜单的问题。
When I click a select menu and hover over the options, it resets the selected option, from the one my cursor is hovering over, to the default/first option. 当我单击选择菜单并将鼠标悬停在选项上时，它会将所选选项从我的光标悬停的选项重置为默认/第一个选项。 When the number of options is large, it becomes very difficult to select the correct option. 当选项数量很大时，选择正确的选项变得非常困难。
The app requires JavaScript to update the screen every second, and this seems to be the cause. 该应用程序需要JavaScript每秒更新一次屏幕，这似乎是原因。
However, I don't seem to have this problem with Chrome or Safari. 但是，我似乎没有Chrome或Safari的这个问题。
Is there a way to resolve this for Firefox? 有没有办法解决这个问题？
index.html 的index.html
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="ctrl">
<div ng-init="updatetimer()">
<div>seconds: {{counter}}</div>
<select ng-model="something" ng-options="n.name for n in namelist">
<option value="">select person</option>
</select>
</div>
</body>
</html>
script.js 的script.js
var app = angular.module('myapp', []);
var ctrl = ['$scope', '$timeout', function($scope, $timeout) {
$scope.counter=0;
$scope.namelist = [
{name: "Name1"}, {name: "Name2"}, {name: "Name3"}, {name: "Name4"}, {name: "Name5"},
{name: "Name6"}, {name: "Name7"}, {name: "Name8"}, {name: "Name9"}, {name: "Name10"},
{name: "Name11"}, {name: "Name12"}, {name: "Name13"}, {name: "Name14"},
{name: "Name15"}, {name: "Name16"}, {name: "Name17"}, {name: "Name18"},
{name: "Name19"}, {name: "Name20"}, {name: "Name21"}, {name: "Name22"},
{name: "Name23"}, {name: "Name24"}, {name: "Name25"}, {name: "Name26"},
{name: "Name27"}, {name: "Name28"}, {name: "Name29"}, {name: "Name30"}
];
$scope.updatetimer = function() {
var updater = function() {
$scope.counter++;
$timeout(updater, 1000);
}
updater();
};
}];
4 个解决方案
解决方案1
3 2014-01-23 06:56:37
It seems like the creating the 'option' elements through ng-options is the root cause to this issue. 似乎通过ng-options创建“选项”元素是导致此问题的根本原因。
I've altered the code a bit to make sure if that's the problem 我已经改变了一些代码以确定是否存在问题
See the plunkr 看看plunkr
http://plnkr.co/edit/DLf2wvVGXRiwci6FhqQO?p=preview http://plnkr.co/edit/DLf2wvVGXRiwci6FhqQO?p=preview
What I've done is to move the creation logic of the options to ng-repeat . 我所做的是将选项的创建逻辑移到ng-repeat 。 That'll fix the issue for now. 这就解决了现在的问题。
解决方案2
3 2014-03-24 17:58:19
Please update the angularjs to v1.2.15 请将angularjs更新为v1.2.15
http://plnkr.co/edit/pTnzpKAwFjugRVpuprFF?p=preview http://plnkr.co/edit/pTnzpKAwFjugRVpuprFF?p=preview
解决方案3
2 2014-07-03 06:55:05
Some people will still face this problem. 有些人仍会面临这个问题。
Here is the fix: 这是修复：
if (existingOption.id !== option.id) {
lastElement.val(existingOption.id = option.id);
}
-if (existingOption.element.selected !== option.selected) {
+if (existingOption.selected !== option.selected) {
lastElement.prop('selected', (existingOption.selected = option.selected));
}
} else {
Add this patch directly into the angular core. 将此补丁直接添加到角度核心中。 This bug still persists in v1.2.8 这个bug仍然存在于v1.2.8中
解决方案4
0 2014-08-13 11:20:48
这是一个基本上在1.0.7之前的AngularJS旧版本问题，它已在1.0.7版本中修复，如果你使用的是1.0.7之前的任何版本，那么你将遇到同样的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.