angularjs ng-Modell wählen Sie nicht aktualisieren, richtig

Habe ich ein sehr einfaches Formular mit einem select mit allen Staaten + Abkürzungen. Wenn Sie die Tastatur zum navigieren der zweite Tastendruck nicht ändern ng-Modell-Wert unter bestimmten Umständen. Zum Beispiel, wenn Sie mit der Tabulatortaste in das select-element und drücken T es wird richtig auswählen, Tennessee, TN werden in die ng-model. Schlagen nach unten-oder T ein zweites mal updates der angezeigte Wert in Texas, aber das ng-Modell noch die TN. Sonderbar genug, diese nicht auftreten, wenn 2 verschiedene Buchstaben, so T, gefolgt von Einem richtig stellt AL in das ng-Modell.

Den HTML sieht wie folgt aus:

<div>
    <label for="user_city">City</label>
    <input type="text" name="user_city" id="user_city" ng-model="user.city" />
    <label for="user_state">State*</label>
    <select name="user_state" id="user_state" ng-model="user.state" style="width: 228px" required>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
    </select>
</div>

Hier ein jsfiddle demonstriert das Problem: http://jsfiddle.net/cKF6Q/2/

Duplizieren, klicken Sie auf das Feld Stadt ein und drücken Sie dann TAB, um den Fokus im select-Feld und geben T. T Sie sehen Benutzer.Staat gehen, um die TN auf das erste drücken von T, aber die zweite wird ignoriert.

HINWEIS: Dies ist nur der ZWEITE Tastendruck, so müssen Sie die Seite neu laden, zwischen den tests.

Ich habe ein workaround für dieses Problem. Einstellung $scope.user = { state: 'AL' }; im inneren der Steuerung behebt das Problem. Immer noch sehr interessiert an der Lösung für dieses problem.
Melden Sie es als bug bitte.
Dies ist ein gemeldeter Fehler in angularjs, aber mein googlefu hat mich im Stich gelassen, ich kann es nicht wieder finden.
Von was ich mich erinnere auf den bug schreiben, wenn Sie ein auswählen, ohne einen leeren Wert und das ng-Modell-Wert "oder" null " dann Winkel erzeugt eine leere option am Anfang der Liste, so dass es nicht update-ng-Modell mit dem falschen Wert. Dann, wenn ein Wert ausgewählt wird, entfernt es die leere option am Anfang (also man kann nicht zurück gehen, um einen ungültigen Wert). Dies führt zu Problemen mit dem zweiten drücken der gleichen Taste, weil es einfach Schritten den ausgewählten index. Drücken einer anderen Taste wieder Fragen die Suche und legt den ausgewählten index.
Bug-Diskussion hier: github.com/angular/angular.js/issues/9134

InformationsquelleAutor brocksamson | 2014-03-26

angularjs

16

Ich hatte genau das gleiche problem. Hier ist ein jsFiddle - die erste dropdown-Liste wurde "behoben", das zweite hat nicht (nur zur demonstration).
```
<div ng-app>
    <input type="text" name="name" ng-model="form.name" />
    <select name="expirationMonth" ng-model="form.expirationMonth">
        <option value="">--</option>
        <option>01</option>
        <option>02</option>
        <option>03</option>
        <option>04</option>
        <option>05</option>
        <option>06</option>
    </select>
    <select name="expirationYear" ng-model="form.expirationYear">
        <option>2014</option>
        <option>2015</option>
        <option>2016</option>
        <option>2017</option>
    </select>

    <pre>{{ form | json }}</pre>
</div>
```
Bemerkte ich es mit der nach unten-Taste. Ich mit tab auf das Feld und drücken Sie den Pfeil nach unten. Die erste Taste drücken, aktualisiert das Modell. Die zweite Taste drücken-updates das form-element, aber nicht das Modell. Die Dritte Taste und jede Taste drücken, danach aktualisiert das Modell wie man es erwarten würde.

Das Update

Fügen Sie eine zusätzliche option mit einem leeren Wert an die Spitze der Liste. Indem Sie den Wert leer, wird es nicht stören mit form-validation (markieren Sie das Feld als erforderlich, zum Beispiel). Auch, AngularJS erlaubt Ihnen, eine statische option, wenn Sie in ein array binden. Aus der AngularJS docs:

Optional einem einzelnen hart-codiert <option> element mit dem Wert
um eine leere Zeichenfolge ist, können verschachtelt werden, in der <select> element. Diese
element symbolisieren die null oder "nicht ausgewählt" - option.

UPDATE: Browser-Diff

Habe ich bemerkt, dass Chrome update die Anzeige des Modells mit jedem drücken der Pfeil nach unten (bis auf den zweiten Tastendruck, wenn die statische Standard-option ist nicht vorhanden, natürlich). Google Chrome als browser verwendet, wenn ich das schreiben der Geige. Firefox, auf der anderen Seite nicht aktualisiert die Anzeige des Modells, bis ich die tab-oder klicken Sie auf das Feld. Internet Explorer 11 updates das Modell "on the fly" ähnlich wie bei Chrome, aber ich war nicht in der Lage zu reproduzieren "2. Tastendruck-Problem" auf IE 11. Ich habe keine anderen Browser zum testen auf.

InformationsquelleAutor Brian Oliver

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Das Update

UPDATE: Browser-Diff