javascript – ng-options模型在使用箭头键盘而不是鼠标时未更新

前端之家收集整理的这篇文章主要介绍了javascript – ng-options模型在使用箭头键盘而不是鼠标时未更新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创造了js小提琴: Fiddle

我创建了一个带有一些ng-options的表单,当你使用按钮而不是鼠标时它会有奇怪的行为(只需单击文本框并按“tab”,你就可以使用箭头键选择它).

<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).这将在第一次尝试时失败,一旦选择了第三个或第一个选项,也会识别第二个选项.

解决方法

使用 here建议的指令,这对我有用:
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");
        })
      }
   }
})

我分叉了fiddle.

原文链接:https://www.f2er.com/js/159154.html

猜你在找的JavaScript相关文章