CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directive
Gabriel Hobold
Gabriel Hobold

Reputation: 693

ng-change directive in a select is not working properly

I have a select input and a function that is called when the selected value is changed. When I change the value using the keyboard arrow keys, the model isn't updated (on the first time). Someone can tell me why?

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>

Thanks in advance.

Upvotes: 3

Views: 871

Answers (2)

scniro
scniro

Reputation: 16989

This is a known issue, and in fact, is still an open one. There are a few ways to get this working how you would expect. You can read about it on the project issue tracker here: select/ngOptions fails to update model after keyboard selection. As a workaround, you can place an empty <option> within your <select>. Observe the following change...

<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 - updated demo

Upvotes: 2

V31
V31

Reputation: 7666

You want an autofocus on the select element, so that it starts from the first time itself. Added autofocus on select

Code Changed:

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

Updated Fiddle

Upvotes: 2

Related Questions