Entfernen Sie die leere Option aus der Option Option mit AngularJS

80

Ich bin neu bei AngularJS. Ich habe viel gesucht, aber es löst mein Problem nicht.

Ich erhalte zum ersten Mal eine leere Option im Auswahlfeld.

Hier ist mein HTML-Code

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config">
            <option ng-repeat="template in configs">{{template.name}}</option>
        </select>
    </div>
</div>

JS

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
    $scope.feed = {};

      //Configuration
      $scope.configs = [
                                 {'name': 'Config 1',
                                  'value': 'config1'},
                                 {'name': 'Config 2',
                                  'value': 'config2'},
                                 {'name': 'Config 3',
                                  'value': 'config3'}
                               ];
      //Setting first option as selected in configuration select
      $scope.feed.config = $scope.configs[0].value;
});

Aber es scheint nicht zu funktionieren. Wie kann ich das lösen? Hier ist die JSFiddle-Demo

iCode
quelle

Antworten:

95

Als Referenz: Warum enthält anglejs eine leere Option in select ?

Das Leerzeichen optionwird generiert, wenn ein Wert, auf den verwiesen wird ng-model, in einer Reihe von Optionen, an die übergeben wird, nicht vorhanden ist ng-options. Dies verhindert eine versehentliche Modellauswahl: AngularJS kann erkennen, dass das ursprüngliche Modell entweder undefiniert ist oder nicht in den Optionen enthalten ist, und möchte den Modellwert nicht selbst bestimmen.

Kurz gesagt: Die leere Option bedeutet, dass kein gültiges Modell ausgewählt ist (mit gültig meine ich: aus dem Satz von Optionen). Sie müssen einen gültigen Modellwert auswählen, um diese leere Option zu entfernen.

Ändern Sie Ihren Code so

var MyApp=angular.module('MyApp1',[])
MyApp.controller('MyController', function($scope) {
  $scope.feed = {};

  //Configuration
  $scope.feed.configs = [
    {'name': 'Config 1',
     'value': 'config1'},
    {'name': 'Config 2',
     'value': 'config2'},
    {'name': 'Config 3',
     'value': 'config3'}
  ];
  //Setting first option as selected in configuration select
  $scope.feed.config = $scope.feed.configs[0].value;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="MyApp1">
  <div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
    <!-- <select ng-model="feed.config">
<option ng-repeat="template in configs">{{template.name}}</option>
</select> -->
    <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
    </select>
  </div>
</div>

Funktionierende JSFiddle-Demo

UPDATE (31. Dezember 2015)

Wenn Sie keinen Standardwert festlegen und die leere Option entfernen möchten,

<select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
      <option value="" selected="selected">Choose</option>
</select>

Und in JS muss kein Wert initialisiert werden.

$scope.feed.config = $scope.feed.configs[0].value;

Shiju K Babu
quelle
2
Eine Erklärung würde wirklich helfen
Jeremy
3
Warum ist ein Wechsel configsvon $scopezu $scope.feednotwendig?
Piotr Dobrogost
Also ... was bedeutet es, wenn ich einen gültigen Wert habe und trotzdem eine leere Zeile angezeigt wird, anstatt diese Option zu verwenden? Modell - 0, Optionen 0, 50, 100 - Auswahl beginnt in der leeren Zeile
TiggerToo
55

Während alle oben genannten Vorschläge funktionieren, muss ich manchmal eine leere Auswahl (mit Platzhaltertext) haben, wenn ich meinen Bildschirm zum ersten Mal betrete. Um zu verhindern, dass das Auswahlfeld diese leere Auswahl am Anfang (oder manchmal am Ende) meiner Liste hinzufügt, verwende ich diesen Trick:

HTML Quelltext

<div ng-app="MyApp1">
    <div ng-controller="MyController">
        <input type="text" ng-model="feed.name" placeholder="Name" />
        <select ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs" placeholder="Config">
            <option value="" selected hidden />
        </select>
    </div>
</div>

Jetzt haben Sie diese leere Option definiert, sodass das Auswahlfeld zufrieden ist, Sie es jedoch ausgeblendet lassen.

RedSparkle
quelle
4
+1 für die einzige Antwort, die das Modell nicht mit der ersten Option in der Liste initialisiert. Meine seltsame Implementierung benötigte die Auswahlliste, um leer zu starten, aber nicht die leere Option, wenn auf die Auswahlliste geklickt wird. Dies ist die einzige Lösung, die für mich funktioniert hat. Vielen Dank!
Billy McKee
21

Hier ist eine aktualisierte Geige: http://jsfiddle.net/UKySp/

Sie mussten Ihren anfänglichen Modellwert auf das tatsächliche Objekt festlegen:

$scope.feed.config = $scope.configs[0];

Und aktualisieren Sie Ihre Auswahl so, dass sie so aussieht:

<select ng-model="feed.config" ng-options="item.name for item in configs">
Adam Putinski
quelle
4

Es gibt mehrere Möglichkeiten wie -

<select ng-init="feed.config = options[0]" ng-model="feed.config"
        ng-options="template.value as template.name for template in feed.configs">
</select>

Oder

$scope.feed.config = $scope.configs[0].name;
Bhalchandra K.
quelle
3

Es ist eine Art Problemumgehung, funktioniert aber wie ein Zauber. Einfach <option value="" style="display: none"></option>als Füllstoff hinzufügen . Wie in:

<select size="4" ng-model="feed.config" ng-options="template.value as template.name for template in feed.configs">
       <option value="" style="display: none"></option>
</select>
Himanshu Arora
quelle
1
Dies verbirgt nicht die Standardoption in IE, denke ich
Rathma
1
habe nicht speziell getestet, dass in IE
Himanshu Arora
3

Wenn Sie nur die Leerstelle entfernen möchten, verwenden Sie ng-show und Sie sind fertig! Es ist nicht erforderlich, den Wert in JS zu initialisieren.

<select ng-model="SelectedStatus" ng-options="x.caption for x in statusList">
    <option value="" ng-show="false"></option>
</select>`
Palash
quelle
2

Ändern Sie Ihren Code so. Sie vergessen den Wert innerhalb der Option. Bevor Sie das ng-Modell zuweisen. Es muss einen Wert haben. Nur dann erhält es nicht den undefinierten Wert.

<div ng-app="MyApp1">
<div ng-controller="MyController">
    <input type="text" ng-model="feed.name" placeholder="Name" />
     <select ng-model="feed">
        <option ng-repeat="template in configs" value="template.value">{{template.name}}    
 </option>
    </select>
    </div>
 </div>

JS

 var MyApp=angular.module('MyApp1',[])
 MyApp.controller('MyController',function($scope) {  
      $scope.feed = 'config1';      
      $scope.configs = [
         {'name': 'Config 1', 'value': 'config1'},
         {'name': 'Config 2', 'value': 'config2'},
         {'name': 'Config 3', 'value': 'config3'}
      ];
 });
Anbu
quelle
1

Verwenden Sie ng-value anstelle von value .

$scope.allRecs = [{"text":"hello"},{"text":"bye"}];
$scope.X = 0;

und dann in HTML-Datei sollte wie sein:

<select ng-model="X">  
     <option ng-repeat="oneRec in allRecs track by $index" ng-value="$index">{{oneRec.text}}</option>
</select>
Farzad.Kamali
quelle
0

Für mich war die Antwort auf diese Frage so, <option value="" selected hidden />wie sie von @RedSparkle vorgeschlagen wurde, und das Hinzufügen ng-if="false"zur Arbeit im IE.

Meine volle Option ist also (hat Unterschiede zu dem, was ich zuvor geschrieben habe, aber das spielt wegen ng-if keine Rolle):

<option value="" ng-if="false" disabled hidden></option>

Vladimir Mironov
quelle
0

Endlich hat es bei mir geklappt.

<select ng-init="mybasketModel = basket[0]" ng-model="mybasketModel">
        <option ng-repeat="item in basket" ng-selected="$first">{{item}}</option>
</select>


Kabiraj Kharel
quelle
-1

Überprüfen Sie auch, ob Sie einen falschen Wert haben oder nicht. Angularjs fügt eine leere Option ein, wenn Sie einen falschen Wert haben. Ich kämpfte 2 Tage lang nur wegen des falschen Wertes. Ich hoffe es wird für jemanden hilfreich sein.

Ich hatte Optionen als [0, 1] und anfangs wurde das Modell auf 0 gesetzt, da eine leere Option eingefügt wurde. Problemumgehung hierfür war ["0", "1"].

Deepchand Yadav
quelle