Eliminare l'inserimento vuoto nel tag select

Question

Ho un numero di elementi che ottengono i loro dati da un oggetto Json e lo popolano usando angolare.

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

E ogni volta che carico il modulo, ho qualcosa di simile nella mia console:

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

posso ottenere i valori di apparire più che bene, ma io non riesco a sbarazzarsi di la prima opzione. Non mi interessa la casella di selezione che mostra il primo elemento della lista, ma non voglio che sia una riga vuota. Come faccio a liberarmene?

Answer 1

è necessario selezionare prima l'opzione di default su ng-init="MyCtrl.selectedCargo=MyCtrl.cargoList[0].name" & ng-model nome non dovrebbe essere uguale a quello della vostra cargoList.

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

Utilizzare NG-opzioni invece di NG-repeat

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

È possibile ottimizzare le etichette/valori ulteriormente se vi piace, controllare la documentazione qui - https://docs.angularjs.org/api/ng/directive/ngOptions

È possibile ng-init, o impostare il primo valore di defualt, qualcosa come

MyCtrl.selectedListItem = MyCtrl.cargoList[0] 

Quindi, se si desidera una funzione di rilevare è stato modificato il valore della select si usa ng-cambiamento come così:

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

nel controllore

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

Answer 3

Uso ngOption<option>

L'attributo ngOptions può essere usato per generare dinamicamente un elenco di <option> elementi per l'elemento <select> utilizzando la matrice o oggetto ottenuto valutando l'espressione di comprensione ngOptions.

Ho usato seguente espressione

etichetta per valore nella matrice

HTML

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

, nel proprio valore modello set controller come primo elemento della lista

this.cargo = this.cargoList[0] 

Nota: è possibile utilizzare MyCtrl.cargoList come modello e array Quindi è necessario utilizzare un'altra variabile per contenere il valore del modello.