由於運行Javascript - AngularJS，Firefox select下拉列表保持刷新/恢復默認選項

Question

我正在AngularJS中構建一個應用程序，在使用Firefox時遇到選擇下拉菜單的問題。

當我單擊選擇菜單並將鼠標懸停在選項上時，它會將所選選項從我的光標懸停的選項重置為默認/第一個選項。 當選項數量很大時，選擇正確的選項變得非常困難。

該應用程序需要JavaScript每秒更新一次屏幕，這似乎是原因。

但是，我似乎沒有Chrome或Safari的這個問題。

有沒有辦法解決這個問題？

的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

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();
  };

}];

Answer 1

似乎通過ng-options創建“選項”元素是導致此問題的根本原因。

我已經改變了一些代碼以確定是否存在問題

看看plunkr

http://plnkr.co/edit/DLf2wvVGXRiwci6FhqQO?p=preview

我所做的是將選項的創建邏輯移到ng-repeat 。 這就解決了現在的問題。

Answer 2

請將angularjs更新為v1.2.15

http://plnkr.co/edit/pTnzpKAwFjugRVpuprFF?p=preview

Answer 3

有些人仍會面臨這個問題。

這是修復：

 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 {

將此補丁直接添加到角度核心中。 這個bug仍然存在於v1.2.8中

Answer 4

這是一個基本上在1.0.7之前的AngularJS舊版本問題，它已在1.0.7版本中修復，如果你使用的是1.0.7之前的任何版本，那么你將遇到同樣的問題。

由於運行Javascript - AngularJS，Firefox select下拉列表保持刷新/恢復默認選項

問題描述

4 個解決方案

解決方案1
3 2014-01-23 06:56:37

解決方案2
3 2014-03-24 17:58:19

解決方案3
2 2014-07-03 06:55:05

解決方案4
0 2014-08-13 11:20:48

由於運行Javascript - AngularJS，Firefox select下拉列表保持刷新/恢復默認選項

問題描述

4 個解決方案

解決方案1 3 2014-01-23 06:56:37

解決方案2 3 2014-03-24 17:58:19

解決方案3 2 2014-07-03 06:55:05

解決方案4 0 2014-08-13 11:20:48

解決方案1
3 2014-01-23 06:56:37

解決方案2
3 2014-03-24 17:58:19

解決方案3
2 2014-07-03 06:55:05

解決方案4
0 2014-08-13 11:20:48