webentwicklung-frage-antwort-db.com.de

Angular fügt seltsame Optionen zum ausgewählten Element hinzu, wenn der Modellwert festgelegt wird

Ich habe ein ausgewähltes Element als solches definiert:

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id">
    <option value="">Select Country</option>
    <option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

Alles funktioniert einwandfrei, wenn ich in der Direktive, die dieses select-Element enthält, keinen Wert setze. Aber wenn ich so etwas wie newAddressForm.country_id = 98 Mache, anstatt die Option mit dem Wert 98 auszuwählen, fügt Angular ein neues am oberen Rand des select-Elements ein, wie folgt:

<option value="? string:98 ?"></option>

Was gibt? Was für ein Format ist das und warum passiert das? Beachten Sie, dass wenn ich eine console.log(newAddressForm.country_id) in der Direktive mache, ich einen normalen "98" Erhalte, es ist nur seltsam im generierten HTML.

Edit: Situationsupdate. Wurde auf die Verwendung von ng-select Umgestellt, aber das Problem bleibt bestehen.

Das seltsame Element wird nicht mehr angezeigt, ABER jetzt befindet sich oben ein anderes Element, das nur ein Fragezeichen ? Als Wert und keine Bezeichnung enthält.

Das ist, wie ich erfuhr, Angulars Option "none selected". Ich verstehe immer noch nicht, warum die von mir angegebene Option nicht ausgewählt wird.

Das Ausführen von newAddressForm.country_id = 98 Führt immer noch zu keinen Ergebnissen. Warum das?

44
Swader

Angular setzt den Wert eines select-Elements nicht auf die tatsächlichen Werte Ihres Arrays und führt einige interne Aktionen aus, um die Bereichsbindung zu verwalten. Siehe Mark Rajcoks ersten Kommentar unter diesem Link:

https://docs.angularjs.org/api/ng/directive/select#overview

Wenn der Benutzer eine der Optionen auswählt, verwendet Angular) den Index (oder Schlüssel), um den Wert in Array (oder Objekt) nachzuschlagen - dieser nachgeschlagene Wert ist das, was das Modell festgelegt hat (Das Modell ist also nicht auf den Wert eingestellt, den Sie im HTML sehen! Dies führt zu großer Verwirrung.)

Ich bin mir nicht ganz sicher, ob ich ein ng-repeat ist die beste Option.

16
lucuma

Verwenden der folgenden Syntax mit ng-options löste dieses Problem für mich:

<select name="country_id" id="country_id" required="required" ng-model="newAddressForm.country_id" ng-options="country.id as country.name for country in countries">
  <option value="">Select Country</option>
</select>
20
jessedvrs

Wenn Ihre Werte Ganzzahlen sind, sollten Sie "" auch dann verwenden, wenn es sich nicht um Zeichenfolgen handelt. Dieser einfache Grund ist genau, warum Sie eine Option mit einem Fragezeichen als Wert erhalten.

Sie sollten dies nicht verwenden:

{ value: 0, name: "Pendiente" },
{ value: 1, name: "Em andamento" },
{ value: 2, name: "Erro" },
{ value: 3, name: "Enviar email" },
{ value: 4, name: "Enviado" }

Das ist der richtige Weg:

{ value: "0", name: "Pendiente" },
{ value: "1", name: "Em andamento" },
{ value: "2", name: "Erro" },
{ value: "3", name: "Enviar email" },
{ value: "4", name: "Enviado" }

Wenn Sie mindestens einen Datensatz haben, "" der nicht verwendet wird, erhalten Sie diesen? Optionswert.

2
Martin

Wenn Sie einem ausgewählten Element einen Wert zuweisen, sucht AngularJS im value-Attribut der Optionstags in diesem ausgewählten Element nach dem angegebenen Wert. Aber der Haken ist AngularJS führt einen typbasierten Vergleich durch. Wenn die Werte in den Options-Tags Zeichenfolgen sind (was normalerweise der Fall ist) und die Variable, die Sie mit ng-model binden, eine Zahl ist, kann AngularJS das passende Optionselement nicht finden und erstellt daher ein eigenes Element wie das folgende.

<option value="? integer:10 ?"></option>

Die Lösung besteht darin, sich selbst zu binden und sie in den entsprechenden Typ zu konvertieren.

In diesem Fall wäre die Lösung, eine Ganzzahl zu binden

<select name="country_id" id="country_id" required="required" ng-model="parseInt(newAddressForm.country_id)">
<option value="">Select Country</option>
<option ng-repeat="country in countries" value="{{country.id}}">{{country.name}}</option>
</select>

Wenn die Werte als Zeichenfolgen festgelegt sind, besteht der Trick darin, sie zu verwenden

<select ... ng-model="newAddressForm.country_id.toString()" >
1
Pratik Kapasi

Ich bin heute Abend auf dasselbe Problem gestoßen, bei dem eine Auswahloption als erste in meiner Liste angezeigt wurde, obwohl ich sie nicht explizit erstellt habe. Ich füllte eine Liste mit Auswahloptionen in meinem Controller und verwendete die gleiche ng-options-Syntax, die oben von jessedvrs erwähnt wurde (mit der Ausnahme, dass ich auch die Standardoption "Option auswählen" in den Controller einfügte, anstatt sie wie er im HTML zu markieren war).

Aus irgendeinem Grund zeigte die Auswahlliste immer eine zusätzliche Option am Index Null mit dem Wert "?", Aber als ich änderte, wie ich meine Standardoption im Controller füllte, verschwand dieses Problem. Ich füllte die ausgewählten Optionen mit API-Aufrufen und füllte sie in ein Versprechen. Ich habe den Fehler gemacht, meine Standardoption "Wähle eine Option aus" als erstes anzugeben, was ich in diesem Versprechen getan habe, aber als ich dies tat, außerhalb des Versprechens (vor dem Ausführen des API-Aufrufs) , die ausgewählten Optionen wurden auf die von mir gewünschte Weise ausgefüllt.

Ich denke, die Option jessedvrs ist eine Lösung für das Problem (Festlegen der Standardoption im HTML-Markup), aber wenn Sie Ihre Optionen stattdessen lieber in JavaScript einfügen möchten, würde ich empfehlen, die Standardoption weiterhin festzulegen, bevor Sie eine API aufrufen oder Prozesse, die möglicherweise noch ausgeführt werden, während der HTML-Code gerendert wird.

1
Developer Dave

Beim Pushen von Daten für die Bereichsvariable können wir folgenden Code verwenden

$scope.enquiryLocationRow.Push({'location': EnqLocation.location, 'state_id': Number(EnqLocation.state_id), 'country_id': Number(EnqLocation.country_id)});

es hat mein Problem gelöst

0
Manoj Atakare

benutze "track by 'value'" am Ende deiner ng-Optionen: D

wie das Beispiel unten:

ng-options = "country.id als country.name für country in countries track by country.id"

0
Renan.