Модель ng-options не обновляется при использовании клавиатуры со стрелкой вместо мыши

Я создал скрипт js: Fiddle

Я создаю форму с некоторыми параметрами ng, и она ведет себя странно, когда вы используете кнопку вместо мыши (просто щелкните текстовое поле и нажмите «вкладку», и вы можете выбрать его с помощью клавиши со стрелкой).

<form ng-controller="MyApp" id="Apps" name="Apps" ng-submit="SendApp()" role="form" novalidate>
    <input type="text" name="title" ng-model="Info.Title" />
    <select id="Formula" ng-model ="Info.Genre" ng-change= "ChangeGenre()"
                        ng-options="id as name for (id, name) in Genre" blank></select>
     <select class="form-control" ng-model ="Info.Program" 
                        ng-options="Program as Name for (Program, Name) in Program" ng-change="ChangeProgram()" blank></select>
    <h3>{{Info.Genre}}</h3>
    <h3>{{Info.Program}}</h3>
    <button type=submit>Submit this </button>
</form>

Javascript:

var theApp = angular.module("TheApp", []);

theApp.controller("MyApp", ['$scope', function($scope){
    $scope.Program = {"1":"Music","2":"Theater","3":"Comedy"};

    $scope.Genre = {"1":"Mystery", "2":"Thriller", "3":"Romance"};

    $scope.ChangeProgram = function(){
        alert($scope.Info.Program + " " + $scope.Info.Genre);
    }
    $scope.ChangeGenre = function (){
        console.log($scope.Info.Genre);

    }
    $scope.SendApp = function(){
        alert($scope.Info.Program + " " + $scope.Info.Genre);
    }
}]);

Модель ng не обновляется, когда вы выбираете первые параметры при первой попытке.

Что не так и как это исправить?

Update:

Как упоминалось в комментарии ниже, чтобы воспроизвести, введите мышь в текстовое поле, вкладку в поле со списком и попробуйте выбрать второй вариант (Thriller) с помощью клавиатуры. Это не удастся с первой попытки, после выбора третьего или первого варианта второй вариант также распознается.


person reptildarat    schedule 25.03.2014    source источник
comment
Я проверил вашу скрипку с помощью Chrome 33.0.1750.154 m и не нашел ничего неработающего. Какого поведения вы ожидаете, которого нет?   -  person Sonata    schedule 25.03.2014
comment
вы пробовали это с помощью клавиши со стрелкой на клавиатуре? И предупреждение не будет срабатывать, когда вы попытаетесь выбрать второй элемент, а затем снова сработает в третьих элементах. Я обновил скрипку, чтобы использовать оповещение.   -  person reptildarat    schedule 25.03.2014
comment
Ах, ошибка только с первой попытки: чтобы воспроизвести, введите мышь в текстовое поле, вкладку в поле со списком и попробуйте выбрать второй вариант (Thriller) с помощью клавиатуры. Это не удастся с первой попытки, после выбора третьего или первого варианта второй вариант также распознается. Кажется, это давняя проблема: github.com/angular/angular.js/issues. /2616 github.com/angular/angular.js/issues/4303 github.com/angular/angular.js/issues/4216   -  person Sonata    schedule 25.03.2014
comment
Только сегодня заметил это странное поведение. Это действительно происходит только при первой попытке изменить значение с помощью клавиш со стрелками. Последующие изменения работают без проблем. Я использую Angular 1.2.24.   -  person Christophe Geers    schedule 17.09.2014
comment
Я отправил новую проблему для решения этой проблемы - github.com/angular/angular. .js/issues/9201   -  person Sasha    schedule 21.09.2014
comment
@Sasha Спасибо, это все еще проблема до сих пор, но она продолжает приближаться к github (не знаю почему).   -  person reptildarat    schedule 21.09.2014
comment
reptildarat — кто-то указал мне на повторяющуюся проблему на GitHub — github.com/angular/angular. js/issues/9134, поэтому вы можете следовать ему. Кроме того, я только что убедился, что это проблема браузера (событие изменения не отправляется для второго нажатия клавиши). Угловые ребята могут реализовать обходной путь, но директива, опубликованная @Sonata ниже, отлично сработала для меня.   -  person Sasha    schedule 21.09.2014


Ответы (1)


Используя директиву, предложенную здесь, это работает для меня:

theApp.directive("select", function() {
    return {
      restrict: "E",
      require: "?ngModel",
      scope: false,
      link: function (scope, element, attrs, ngModel) {
        if (!ngModel) {
          return;
        }
        element.bind("keyup", function() {
          element.triggerHandler("change");
        })
      }
   }
})

Я развил скрипту.

person Sonata    schedule 25.03.2014
comment
Это решение отлично сработало для меня, даже для Angular 1.3.x, так как это известная проблема. github.com/angular/angular.js/issues/4216 - person Joshua Powell; 18.12.2014