ng-opzioni come impostare la prima selezione sempre vuota

Question

Sto usando angularjs in un progetto e in cui sto usando ng-options per la generazione.

Inizialmente, quando le pagine ricaricare e nessun elemento si seleziona l'opzione HTML generato come di seguito:

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

Ma quando seleziono un elemento (ex punto 2). Il primo vuoto di selezione è andato. So che sta accadendo mentre il modello ng viene impostato per valore selezionato. Ma prima voglio selezionare sempre vuoto in modo che l'utente possa resettare il filtro.

Grazie in anticipo.

Answer 1

Questo farà il lavoro per voi:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist"> 
    <option value="">Select Option</option> 
</select> 

Answer 2

Sembra che l'opzione migliore sia quella di includere l'elemento vuoto come primo elemento nell'elenco articoli.

Answer 3

È possibile rinunciare a utilizzare il ng-options e utilizzare ng-repeat invece e rendere la prima opzione vuota. Vedi l'esempio qui sotto.

<select size="3" ng-model="item"> 
    <option value="?" selected="selected"></option> 
    <option ng-repeat="s in itemlist" value="{{s.value}}">{{s.name}}</option> 
</select> 

Answer 4

Per chiunque là fuori che trattano valore come valida "null" per una delle opzioni (in modo immaginare che "null" è un valore di uno degli elementi in typeOptions nell'esempio seguente), ho trovato che il modo più semplice per assicurarsi che l'opzione aggiunta automaticamente sia nascosta è usare ng-if.

<select ng-options="option.value as option.name for option in typeOptions"> 
    <option value="" ng-if="false"></option> 
</select> 

Perché ng-if e not ng-hide? Poiché vuoi che i selettori di CSS che mirano alla prima opzione in alto selezionino l'opzione "reale" come target, non quella che è nascosta. Diventa utile quando si utilizza il rapportatore per il test di e2e e (per qualsiasi motivo) si utilizza by.css() per selezionare le opzioni di destinazione.

Kevin - Suu Tam

Answer 5

 <select ng-model="dataItem.platform_id" 
      ng-options="item.id as item.value for item in platformList" 
      ng-init="dataItem.platform_id=dataItem.platform_id||platformList[0].id"></select> 

Answer 6

La soluzione di cui sopra volontà corrompere il modello con dati spazzatura. Si prega di utilizzare la direttiva per ripristinare il modello nel modo giusto JS: Selezionare Opzione

Directive" 
.directive('dropDown', function($filter) { 
    return { 

     require: 'ngModel', 
     priority: 100, 
     link: function(scope, element, attr, ngModel) { 

      function parse(value) { 

       if (value) { 

        if(value === "") 
        { 
         return "crap" 
        } 
        else 
        { 
         return value; 
        } 

       } else { 
        return; 
       } 
      } 


      ngModel.$parsers.push(parse); 

     } 
    }; 
}); 

Answer 7

controller

$scope.item = ''; 

$scope.itemlist = { 
    '' = '', 
    'Item 0' = 1, 
    'Item 1' = 2, 
    'Item 2' = 3 
}; 

HTML

<select data-ng-model="item" data-ng-options="v as k for (k, v) in itemlist"></select>