Wybierz element w kanciastym niezawierającym modelu modelValue przy drugiej selekcji

Mam wybrany element związany z modelem w widoku kątowym. Podczas wypełniania formularza za pomocą klawiatury zauważyłem, że jeśli w dół strzałka do drugiej opcji wartość, model nadal reprezentuje pierwszą wartość. Dzieje się tak tylko wtedy, gdy za pomocą klawiatury wypełniasz formularz.Wybierz element w kanciastym niezawierającym modelu modelValue przy drugiej selekcji

Konfiguracja jest bardzo prosta, przy użyciu kątowej 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>

Dlaczego nie zmiana modelu na drugi dół strzałki prasy?

Aktualizacja Oto plunker który wykazuje zachowanie, http://plnkr.co/edit/Hiu67NTR3Gpk9jByZtQD?p=info

2-te Aktualizacja Oto modified plunker która implementuje obejście Matt proponowane. To obejście powoduje pożądane zachowanie w Chrome, Firefoksie i Internet Explorerze

Źródło

2015-08-11 Dustin Hodges

Do góry. Dziwne. Mam nadzieję, że rozwiążesz ten problem i jestem ciekawa, co się dzieje. Podejrzewając, że to błąd – scniro

Bardzo dziwne. Otworzyłem problem https://github.com/angular/angular.js/issues/12562 –

Z jakiej przeglądarki korzystasz? Widzę problem w Chrome, ale w IE11 (na Win7) wszystko wydaje się w porządku. Zastanawiam się, czy jest to bardziej dropdown problem w przeglądarce –

Wierzę, że Twój problem powoduje sklonowanie wcześniej istniejącego problemu kątowego, który ma obejście.

Zapraszam do przejrzenia the issue i prześledzenia konwersacji i niektórych duplikatów.

Prace wokół sugerowane dla Chrome/Safari/Firefox wygląda następująco:

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

Edit:

PO na issue w komentarzach powyżej został zamknięty jako duplikat tego powodu.

Źródło

2015-08-13 23:16:10 Matt

W porządku, to może działać. Może również zawierać firefox, ponieważ zdarzenia na klawiaturze nie powodują zmian w FF zgodnie z tym wątkiem. –

@Dustin Hodges To rozwiązanie działa dla mnie w FF, a także przy użyciu pnkr wspomnianego w numerze. (http://plnkr.co/edit/PcD55HqECuJrSC9usUFv?p=preview) – Matt

Wybierz element w kanciastym niezawierającym modelu modelValue przy drugiej selekcji

Odpowiedz

Powiązane problemy