AngularJS - Opzione extra blank aggiunta utilizzando ng-repeat nel tag select

Question

Ho una listbox che sto creando con una selezione, usando AngularJS ng-repeat. La casella di riepilogo viene creata correttamente e quando seleziono uno degli elementi e faccio clic sul mio pulsante, ottengo la funzione e ho le informazioni di cui ho bisogno.

Il mio codice html è il seguente:

<select size="6" ng-model="item" ng-options="s.name for s in itemlist"></select> 
<button class="btn tt-btn-blue" ng-model="singleModel" ng-click="onLoadClicked(item.id)">Load</button> 

Il mio problema è che quando le vernici ListBox, dispone di un elemento alla parte superiore che è vuoto. Quando ho ispezionare la casella di riepilogo durante una corsa in Chrome, ottengo il seguente output nella console:

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

Mi chiedo come posso sbarazzarsi della prima opzione inserita da NG-repeat. Non voglio vedere uno spazio vuoto nella parte superiore della lista. Mi rendo conto che un'opzione sarebbe quella di impostare la prima opzione effettiva (value = "0") come elemento selezionato, ma preferirei che non ci fossero elementi selezionati da avviare.

Answer 1

Ogni volta che si visualizza <option value="?" selected="selected"></option> nella selezione, significa che ng-model è impostato su un valore che non si trova nello ng-options. Quindi, se non vuoi l'opzione vuota, devi assicurarti che item sia impostato su un valore nel tuo itemlist. Questo potrebbe essere facile come avente la seguente nel controller:

$scope.item = $scope.itemlist[0]; 

Questo gli darà un valore iniziale che, e poi angolare aggiornerà per voi da allora in poi.

Answer 2

il modo più semplice per assicurarsi che l'opzione aggiunta automaticamente da angular sia nascosta è la direttiva ng-if.

<select ng-options="option.id as option.description for option in Options"> 
 
    <option value="" ng-if="false"></option> 
 
</select>

Answer 3

ho trovato la soluzione, dopo una lunga RND Si prega di trovare il seguente codice che funzionerà per voi.

Ecco il codice HTML

<div class="col-xs-3" ng-controller="GetUserADDetails"> 
      <label>Region</label> 
       <select id="DDLRegion" ng-model="selectedregion" class="form-control" ng-change="getBranched(selectedregion)"> 
           <option value="" >--Select Region--</option>         
           <option ng-repeat="region in Regions" value="{{region.LookupID}}">{{region.LookupValue}}</option> 
        </select> 
</div> 

Ecco il codice del modulo

var app = angular.module("UserMasterModel", []) 
     .controller("GetUserADDetails", function ($scope, $http,$log) { 
     $http({ 
       method: 'GET', 
       url: '/UserMaster/GetAllRegion' 
      }) 
      .then(function (response) { 
       $scope.Regions = response.data;       
       //$log.info(response); 
      }); 

});