Geek Answers Handbook

Select an element in angular without updating modelValue on second select

I have a select element bound to a model in an angular view. When filling out the form with the keyboard, I noticed that if you are a down arrow to the second parameter value, the model is still the first value. This only happens when using the keyboard to fill out a form.

The setup is pretty simple using angular 1.4.3:

var app = angular.module('app', []); app.controller('myController', function() { var vm = this; vm.options = [{ Id: 1, Value: 'A' }, { Id: 2, Value: 'B' }, { Id: 3, Value: 'C' }] }); 
 <script src="https://code.angularjs.org/1.4.3/angular.js"></script> <body ng-app="app"> <div ng-controller="myController as ctrl"> <p> Model is not updated on second down button push. Repro: <ol> <li>Tab to select element</li> <li>Hit down and notice the optionId updated to 1</li> <li>Hit down again and notice that the displayed value changes to B, but optionId stays as 1</li> <li>Hit down again and notice that the displayed value changes to C, and optionId changes to 3</li> <li>Hit up and notice that displayed value changes to B, and optionId changes to 2</li> </ol> Why doesn't the optionId = 2 on the initial selection of B </p> <select id="mySelect" ng-options="item.Id as item.Value for item in ctrl.options" ng-model="ctrl.optionId" style="width:200px"> </select> <div><strong>optionId: {{ctrl.optionId}}</strong> </div> </div> </body>

Why doesn't updating the model in the second down arrow click?

Update Here is the behavior demonstration planner, http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info

Second update Here's a modified plunker that implements the workaround proposed by Matt. This workaround causes the desired behavior in Chrome, Firefox, and Internet Explorer.

+7
javascript angularjs html-select
source share
1 answer

I believe your problem is cloning a preexisting angular problem that has affordable work.

Feel free to view the problem and trace the conversation and some duplicates.

The work offered for Chrome / Safari / Firefox looks like this:

 directive('changeOnKeyup', function changeOnKeyupDirective() { return function changeOnKeyupPostLink(scope, elem) { elem.on('keyup', elem.triggerHandler.bind(elem, 'change')); }; });

Edit:

The OP issue in the comments above was closed as a duplicate for this reason.

+5
source share

More articles:


All Articles