选择中的 ng-change 指令无法正常工作答案

【问题标题】：ng-change directive in a select is not working properly选择中的 ng-change 指令无法正常工作
【发布时间】：2015-10-11 11:41:34
【问题描述】：

我有一个选择输入和一个在所选值更改时调用的函数。当我使用键盘箭头键更改值时，模型不会更新（第一次）。有人可以告诉我为什么吗？

Here is my Fiddle

JS：

var app = angular.module('myApp',[]);

function mainController($scope) {
    $scope.people = [
        {
            id: 1,
            name: 'Julius'
        },
        {
            id: 2,
            name: 'Julius Rock'
        },
        {
            id: 3,
            name: 'Christopher'
        }
    ];

    $scope.selectionChanged = function() {
        console.log('test');
    };

}
app.controller('mainController', mainController);

HTML：

<div ng-controller="mainController">
    <!-- If you change the value with the arrows ng-change doesn't work on the first change. -->
    <select ng-model="selected" ng-options="person.name for person in people track by person.id" ng-change="selectionChanged()"></select>

    <span>{{selected}}</span>    
</div>

提前致谢。

【问题讨论】：

在这里工作正常.. 在 mozila 中，您必须按 Enter 才能进行更改，否则就可以了
我正在使用最新的 chrome。在 Edge 中它可以完美运行。在 Firefox 中，我需要按 Enter，就像你说的那样。

标签： javascript html angularjs angularjs-directive

【解决方案1】：

这是一个已知问题，事实上，它仍然是一个未解决的问题。有几种方法可以按照您的预期工作。您可以在此处的项目问题跟踪器上阅读它：select/ngOptions fails to update model after keyboard selection。作为一种解决方法，您可以在您的<select> 中放置一个空的<option>。观察以下变化...

<select ng-model="selected" ng-options="person.name for person in people track by person.id" ng-change="selectionChanged()">
    <option value=""></option>
</select>

JSFiddle Link - 更新演示

【讨论】：

【解决方案2】：

您希望在选择元素上自动对焦，以便它从第一次开始。添加自动对焦选择

代码已更改：

<select ng-model="selected" ng-options="person.name for person in people track by person.id" ng-change="selectionChanged()" autofocus></select>

Updated Fiddle

【讨论】：

这似乎仍然没有在第一次按键时更新 - 最新的 Chrome