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

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;

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.

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

Eine andere zu lösende Methode ist die Verwendung von: $firstinng-repeat

Verwendung:

<select ng-model="feed.config">
    <option ng-repeat="template in configs" ng-selected="$first">{{template.name}}</option>
</select>

Referenzen :

ngSelected : https://docs.angularjs.org/api/ng/directive/ngSelected

$ first : https://docs.angularjs.org/api/ng/directive/ngRepeat

Prost

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;

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>

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

Ä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'}
      ];
 });

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>

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>

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>

Ü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"].