ng-options model not updated when use arrow keyboard instead of mouse

问题

I Created js fiddle: Fiddle

I create a form with some ng-options in it, and it have strange behavior when you use the button instead of mouse (just click on the textbox and press "tab" and you can select it using arrow key).

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

The ng-model are not updated when you select the first options on First try.

What's Wrong, and How To Fix this?

Update:

As Mentioned on comment below, To reproduce, enter mouse into textfield, tab to combobox and try to select the second option (Thriller) using keyboard. This will fail on the first attempt, once the third or first option is selected, the second option is also recognized.

回答1:

Using the the directive proposed here, this works for me:

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

I forked the fiddle.

来源：https://stackoverflow.com/questions/22630744/ng-options-model-not-updated-when-use-arrow-keyboard-instead-of-mouse

标签

javascript

jquery

html

angularjs

ng-options