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

admin管理员组

文章数量:1345400

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 ment below, To reproduce, enter mouse into textfield, tab to bobox 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.

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 ment below, To reproduce, enter mouse into textfield, tab to bobox 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.

• javascript
• jquery
• html
• angularjs
• ng-options

Share Follow edited Sep 21, 2014 at 12:40 reptildarat asked Mar 25, 2014 at 9:47 reptildaratreptildarat 1,03622 gold badges1818 silver badges3535 bronze badges 7

• 1 I tested your fiddle using Chrome 33.0.1750.154 m and can't find anything not working. What kind of behavior are you expecting that isn't there? – Sonata Commented Mar 25, 2014 at 10:06
• did you try it using arrow key in the keyboard? And the alert will not fired when you try choose the second item, and then worked again in third items. I updated the fiddle to use alert. – reptildarat Commented Mar 25, 2014 at 10:47
• 1 Ah, the error is only on the first try: To reproduce, enter mouse into textfield, tab to bobox 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. This seems to be a long running issue: github./angular/angular.js/issues/2616 github./angular/angular.js/issues/4303 github./angular/angular.js/issues/4216 – Sonata Commented Mar 25, 2014 at 11:05
• Just noticed this odd behavior today. It does indeed only occur on the first attempt to change the value using the arrow keys. Subsequent changes work without a problem. I am using Angular 1.2.24. – Christophe Geers Commented Sep 17, 2014 at 3:52
• I've submitted a new issue to follow up on this - github./angular/angular.js/issues/9201 – Sasha Commented Sep 21, 2014 at 12:31

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 14

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.

本文标签： javascriptngoptions model not updated when use arrow keyboard instead of mouseStack Overflow