Выпадающий список выбора Firefox продолжает обновлять/возвращаться к опции по умолчанию из-за запуска Javascript - AngularJS

Я создаю приложение в AngularJS, и у меня возникают проблемы с выбором раскрывающихся меню при использовании Firefox.

Когда я нажимаю меню выбора и навешиваю параметры, он сбрасывает выбранную опцию, начиная с той, которую курсор курсирует, до параметра по умолчанию/первый. Когда количество опций велико, становится очень сложно выбрать правильный вариант.

Приложению требуется JavaScript для обновления экрана каждую секунду, и это, по-видимому, является причиной.

Однако у меня, похоже, нет этой проблемы с Chrome или Safari.

Есть ли способ разрешить это для Firefox?

Демо здесь.

index.html

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script data-require="[email protected]" 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();
  };

}];

Ответы

Ответ 1

Кажется, что создание элементов 'option' с помощью ng-options является основной причиной этой проблемы.

Я немного изменил код, чтобы убедиться, что проблема

См. plunkr

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

Что я сделал, это переместить логику создания параметров в ng-repeat. Это исправит проблему на данный момент.

Ответ 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 {

Добавьте этот патч непосредственно в ядро ​​ angular. Эта ошибка все еще сохраняется в версии 1.2.8.

Ответ 4

Что касается проблемы с устаревшей версией AngularJS в основном до версии 1.0.7, она была исправлена ​​в версии 1.0.7, если вы используете что-либо старше 1.0.7, тогда вы получите такую ​​же проблему.