Seleziona elemento in angolare senza aggiornare modelValue sulla seconda selezione

Ho un elemento di selezione associato a un modello in una vista angolare. Durante la compilazione del modulo con la tastiera, ho notato che se si scendeva la freccia sulla seconda opzione il valore, il modello rappresenta ancora il primo valore. Ciò accade solo quando si utilizza la tastiera per compilare il modulo.Seleziona elemento in angolare senza aggiornare modelValue sulla seconda selezione

configurazione è piuttosto semplice, utilizzando angolare 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>

Perché non lo fa l'aggiornamento del modello sulla seconda freccia giù stampa?

Aggiornamento Ecco un plunker che presenta il comportamento, http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info

2 ° Aggiornamento Ecco un modified plunker che implementa la soluzione Matt proposto. Questa soluzione alternativa causa il comportamento desiderato in Chrome, Firefox e Internet Explorer

fonte

2015-08-11 Dustin Hodges

Su. Strano. Spero che tu risolvi questo, sono curioso di sapere cosa sta succedendo. Sospetto che sia un bug – scniro

Davvero strano. Ho aperto un problema https://github.com/angular/angular.js/issues/12562 –

Che browser stai utilizzando? Vedo il problema in Chrome, ma in IE11 (su Win7), tutto sembra a posto. Mi chiedo se è più un problema di dropdown nel browser –

Credo che il tuo problema cloni un problema angolare preesistente che ha un lavoro disponibile.

Sentitevi liberi di cercare the issue e tracciare la conversazione e alcuni dei duplicati.

Il lavoro attorno suggerito per Chrome/Safari/Firefox si presenta così:

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

Edit:

del issue PO nei commenti di cui sopra è stato chiuso come un duplicato per questo motivo.

fonte

2015-08-13 23:16:10 Matt

OK, potrebbe funzionare. Potrebbe essere necessario includere anche per Firefox, perché gli eventi della tastiera non causano eventi di cambiamento in FF secondo quel thread. –

@Dustin Hodges Questa soluzione funziona anche per me in FF utilizzando il plnkr menzionato nel problema. (Http://plnkr.co/edit/PcD55HqECuJrSC9usUFv?p=preview) – Matt

Seleziona elemento in angolare senza aggiornare modelValue sulla seconda selezione

risposta

Problemi correlati