Angular fügt seltsame Optionen in das select-Element ein, wenn der Modellwert festgelegt wird

Habe ich ein select-element so 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 Prima funktioniert, wenn ich nicht die Einstellung jeder Art von Wert in der Richtlinie, die enthält das select-element. Aber wenn ich etwas mache wie newAddressForm.country_id = 98 statt der Auswahl der option mit dem Wert 98, Eckig fügt eine neue an der Spitze der select-element, etwa so:

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

Was gibt? Welche Art von format ist das und warum geschieht dies? Beachten Sie, dass wenn ich einen console.log(newAddressForm.country_id) in der Richtlinie, bekomme ich eine normale "98"es ist nur seltsam das in der generierten HTML-Code.

Edit: Situation update. Wechselte mit ng-selectaber das Problem weiterhin besteht.

Das komische element nicht mehr angezeigt, ABER jetzt gibt es ein weiteres element an der Spitze, einen, der hat nur ein Fragezeichen ? als Wert, und kein label.

Ist, von dem, was ich gesammelt, Eckig ist "none selected" option. Ich verstehe immer noch nicht, warum Sie nicht wählen Sie die option ich sagen, es zu wählen, aber.

Tun newAddressForm.country_id = 98 gibt noch keine Ergebnisse. Warum ist das so?

InformationsquelleAutor der Frage Swader | 2013-05-28

  1. 16

    Winkel nicht den Wert von einem select-element, um die tatsächlichen Werte des Arrays und führt einige interne Dinge zu verwalten, die den Umfang verbindlich. Siehe Daneben Rajcok der erste Kommentar unter diesem link:

    http://docs.angularjs.org/api/ng.directive:select

    Wenn der Benutzer wählt eine der Optionen, Winkel verwendet den index
    (oder Schlüssel) , lookup den Wert im array (oder Objekt) -- das sah-bis
    Wert ist das, was das Modell eingestellt ist. (So, das Modell ist nicht auf die
    Wert sehen Sie in der HTML! Dies bewirkt, dass eine Menge Verwirrung.)

    Ich bin mir nicht ganz sicher mit einem ng-repeat ist die beste option.

    InformationsquelleAutor der Antwort lucuma

  2. 17

    Mithilfe 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>

    InformationsquelleAutor der Antwort jessedvrs

  3. 2

    Wenn Ihre Werte sind ganze zahlen, die Sie verwenden sollten "" auch wenn es keine strings, das einfachen Grund ist genau der Grund, warum Sie immer eine option mit einem Fragezeichen als Wert.

    Sollten Sie sich nicht mit dieser: 

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

    Dies 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 noch mindestens ein Datensatz, die nicht mit "" Sie bekommen dieses ? option Wert.

    InformationsquelleAutor der Antwort Martin

  4. 1

    Ich lief in das gleiche problem früher an diesem Abend, wo ich sah eine option wählen, zeigt sich als die erste in meiner Liste, obwohl ich nicht explizit zu erstellen. Ich füllte eine Liste von Optionen wählen, die in meinem controller und das gleiche ng-options-syntax genannten durch jessedvrs (außer, dass ich auch das einfügen der "wählen Sie eine option" default-option im controller statt, die ihn in den HTML-wie er war).

    Aus irgendeinem Grund die select-Liste würde immer zeigen eine zusätzliche option, die bei index null mit einem Wert von "?", aber wenn ich verändert, wie ich füllte meine Standard-option in den controller, das Problem ging Weg. Ich war das Auffüllen der Optionen wählen, indem Sie ein API-Aufruf, die Sie innerhalb von ein Versprechen. Ich habe den Fehler gemacht, auch das Auffüllen meiner Standard - "eine option auswählen" - option als das erste, was ich Tat, in dieser Versprechen, aber wenn ich Tat dies, anstatt außerhalb der Verheißung vor, die den API-Aufruf), wählen Sie Optionen besiedelte die Art, wie ich nachgelassen.

    Ich denke jessedvrs option ist eine Lösung für das problem (die Einstellung der Standard-option in der HTML-markup), aber wenn Sie es vorziehen, füllen Sie Ihre Optionen in javascript anstelle, würde ich vorschlagen, noch legen Sie die Standard-option, bevor alle Aufrufe an eine API oder Prozesse, die möglicherweise noch ausgeführt werden, während die HTML gerendert wird.

    InformationsquelleAutor der Antwort Developer Dave

  5. 1

    Wenn Sie einen Wert zuweisen, um einige select-element, AngularJS sieht für die zur Verfügung gestellten Wert in das value-Attribut des option-tags in das select-element. Aber der Haken ist, AngularJS funktioniert ein Typ basiert Vergleich. Also, wenn die Werte in den option-tags sind strings (was meistens der Fall ist) und die variable, die Sie binden mit ng-model ist eine Zahl, AngularJS nicht finden die passenden option-element und daher, schafft sich seine eigenen element wie das -

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

    Die Lösung ist, während die Bindung selbst, wandeln Sie auf den entsprechenden Typ.

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

    <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 so sind wie die Saiten, der trick wäre, die Nutzung

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

    InformationsquelleAutor der Antwort Pratik Kapasi

  6. 0

    Während Sie Daten über die scope-variable, die wir verwenden können, folgenden code 

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

    es mein Problem gelöst

    InformationsquelleAutor der Antwort Manoj Atakare

Schreibe einen Kommentar