wake-up-neo.net

ng-options wie man zuerst einstellen immer leer auswählen

Ich verwende eckigejs in einem Projekt und in dem ich ng-options zum Erzeugen benutze.

Wenn die Seiten neu geladen werden und kein Optionselement ausgewählt ist, wird die HTML-Datei wie folgt generiert:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
</select>

Wenn ich jedoch ein Element auswähle (z. B. Punkt 2), ist der erste leere Auswahlvorgang weg. Ich weiß, dass dies geschieht, da das ng-Modell durch den Auswahlwert festgelegt wird. Aber ich möchte zuerst immer leer auswählen, damit der Benutzer den Filter zurücksetzen kann.

Danke im Voraus.

javascriptangularjsoptions
50
arnold

Dies erledigt die Arbeit für Sie:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
    <option value="">Select Option</option>
</select>
127
geniuscarrier

Für alle, die "null" als gültigen Wert für eine der Optionen behandeln (stellen Sie sich also vor, dass "null" ein Wert eines der Elemente in typeOptions im folgenden Beispiel ist), fand ich die einfachste Möglichkeit, um sicherzustellen, dass automatisch hinzugefügt wird Option ist ausgeblendet, um ng-if zu verwenden.

<select ng-options="option.value as option.name for option in typeOptions">
    <option value="" ng-if="false"></option>
</select>

Warum ng-wenn und nicht ng-hide? Da Sie css-Selektoren verwenden möchten, die die erste Option innerhalb von oben anvisieren, wählen Sie die Option "Real" aus, nicht die ausgeblendete. Dies ist nützlich, wenn Sie einen Winkelmesser für e2e-Tests verwenden und (aus welchem ​​Grund auch immer) Sie mit.css () zum Auswählen von Auswahloptionen verwenden.

Kevin - Sưu Tầm

10
Kevin Black

Sie können auf ng-options verzichten und stattdessen ng-repeat verwenden und die erste Option leer lassen. Siehe Beispiel unten.

<select size="3" ng-model="item">
    <option value="?" selected="selected"></option>
    <option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option>
</select>
2
m.e.conroy

Es scheint, dass die beste Option darin besteht, das leere Element als erstes Element in der Artikelliste aufzunehmen.

1
Juliane Holzt

Die obige Lösung beschädigt das Modell mit Junk-Daten. Bitte verwenden Sie die Direktive, um das Modell richtig zurückzusetzen. JS: Wähle eine Option 

Directive"
 .directive('dropDown', function($filter) {
    return {

        require: 'ngModel',
        priority: 100,
        link: function(scope, element, attr, ngModel) {

            function parse(value) {

                if (value) {

                    if(value === "")
                    {
                        return "crap"
                    }
                    else
                    {
                        return value;
                    }

                } else {
                    return;
                }
            }


            ngModel.$parsers.Push(parse);

        }
    };
});
1
user5971409

Controller 

$scope.item = '';

$scope.itemlist = {
   '' = '',
   'Item 0' = 1,
   'Item 1' = 2,
   'Item 2' = 3
};

HTML

<select data-ng-model="item" data-ng-options="v as k for (k, v) in itemlist"></select>
0
Khaled Ebdelli
        <select ng-model="dataItem.platform_id"
            ng-options="item.id as item.value for item in platformList"
            ng-init="dataItem.platform_id=dataItem.platform_id||platformList[0].id"></select>
0
image72