Befreien Sie sich von leerem Eintrag in select Tag

Question

Ich habe eine Reihe von Elementen, die ihre Daten von einem Json-Objekt erhalten und sie mit eckigen bevölkern.

<select ng-model="MyCtrl.cargoList"> 
    <option ng-repeat="cargo in MyCtrl.cargoList">{{ cargo.name }}</option> 
</select> 

Und wenn ich das Formular zu laden, bekomme ich so etwas in meiner Konsole:

<select ng-model="MyCtrl.cargoList"> 
    <option value="? object:25 "?></option> 
    <option value="">Gloves</option> 
    <option value="">Jacket</option> 
    <option value="">Shoes</option> 
</select> 

Ich kann die Werte bekommen einfach gut erscheinen, aber ich kann nicht scheinen, los die erste Option. Es macht mir nichts aus, wenn das Auswahlfeld das allererste Element in der Liste anzeigt, aber ich möchte nicht, dass es eine Leerzeile ist. Wie werde ich es loswerden?

Answer 1

Sie müssen sich auf ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name" & ng-model Standardnamen der 1. Option sollte das Ihrer cargoList nicht gleich sein.

Markup

<select ng-model="MyCtrl.selectedCargo" ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name"> 
    <option ng-repeat="cargo in MyCtrl.cargoList" value="cargo.name">{{ cargo.name }}</option> 
</select> 

Demo Plunkr

Answer 2

Verwendung ng-Optionen statt ng-repeat

<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList"></select> 

Sie die Feinabstimmung können die Etiketten/Werte weiter, wenn Sie möchten, überprüfen Sie die Dokumentation hier - https://docs.angularjs.org/api/ng/directive/ngOptions

können Sie ng-init oder stellen Sie den ersten Wert auf defualt, so etwas wie

MyCtrl.selectedListItem = MyCtrl.cargoList[0] 

wenn Sie also eine Funktion ermitteln möchten Sie den Wert der ausgewählten geändert haben würden Sie ng Wechsel verwenden wie so:

<select ng-model="MyCtrl.selectedListItem" ng-options="cargo for cargo in MyCtrl.cargoList" ng-change="selectChanged"></select> 

In dem Controller

$scope.selectChanged = function(){ 
//apply your logic 
}; 

Answer 3

Verwenden ngOption<option>

Das ngOptions Attribut verwendet werden kann, um dynamisch eine Liste von <option> Elementen für das <select> Element zu erzeugen, um das Array oder Objekt erhalten durch Auswertung des Verständnisausdrucks ngOptions.

Ich habe folgende Ausdruck verwendet

Label für Wert in Array

HTML

<select ng-model="MyCtrl.cargo" ng-options="cargo.name for cargo in MyCtrl.cargoList"> 
</select> 

und in Ihrem Controller-Set Modellwert als erstes Element der Liste

Hinweis: Sie können MyCtrl.cargoList sowohl als Modell als auch als Array verwenden. Sie sollten also eine andere Variable verwenden, um den Modellwert zu speichern.