javascript - 由于运行 Javascript - AngularJS,Firefox 选择下拉列表不断刷新/恢复为默认选项

标签 javascript angularjs firefox html-select selection

我正在使用 AngularJS 构建应用程序,但在使用 Firefox 时遇到了选择下拉菜单的问题。

当我单击一个选择菜单并将鼠标悬停在选项上时,它会将所选选项(从我的光标悬停在其上的那个)重置为默认/第一个选项。 When the number of options is large, it becomes very difficult to select the correct option.

该应用程序需要 JavaScript 每秒更新一次屏幕,这似乎是原因。

但是,我在 Chrome 或 Safari 上似乎没有这个问题。

有没有办法为 Firefox 解决这个问题?

Demo here .

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>

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

}];

最佳答案

似乎通过 ng-options 创建 'option' 元素是这个问题的根本原因。

我已经稍微修改了代码以确保这是否是问题所在

查看plunkr

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

我所做的是将选项的创建逻辑移至ng-repeat。这将暂时解决问题。

关于javascript - 由于运行 Javascript - AngularJS,Firefox 选择下拉列表不断刷新/恢复为默认选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17498123/

相关文章:

javascript - 如何测试 Javascript 是否提交了表单?

javascript - 无法在 Javascript Ruby on Rails View 中运行循环

javascript - 使用已检查的行的索引创建一个数组

javascript - 使用 ng-repeat 后如何显示唯一值?

javascript - 固定标签更新通知

javascript - NestJS:拦截器测试中不允许通过字符串文字进行对象访问

javascript - 添加动态字段以创建特定的 JSON 格式

javascript - 使用 Angular.js 在某些值后打破表行

javascript - 将小书签变成 Firefox 扩展?

python - 无法使用 selenium、python 加载 firefox 配置文件