ng-options jak ustawić pierwszy wybór zawsze pusty

Question

Używam angularjs w projekcie, w którym używam opcji ng do generowania.

Początkowo, gdy strona przeładować i żaden element nie jest zaznaczona opcja html wygenerowany jak poniżej:

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

Ale kiedy wybierz element (ex pozycja 2). Pierwszą puste wybierz zniknął. Wiem, że dzieje się tak, ponieważ model ng jest ustawiany według wybranej wartości. Ale chcę, aby najpierw wybrać zawsze puste, aby użytkownik mógł zresetować filtr.

Z góry dziękuję.

Answer 1

to zrobi za Ciebie:

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

Answer 2

Wygląda na to, że najlepszym wyjściem byłoby umieszczenie pustego elementu jako pierwszego elementu w liście przedmiotów.

Answer 3

Można zrezygnować z używania ng-options i zamiast tego użyć ng-repeat i pozostawić pierwszą opcję pustą. Zobacz przykład poniżej.

<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

Dla kogoś tam, że leczyć „null” jako poprawną wartość jednej z opcji (tak wyobrazić, że „null” jest wartością jeden z elementów w TypeOptions w przykładzie poniżej), znalazłem, że najprostszym sposobem, aby upewnić się, że automatycznie dodana opcja jest ukryta, jest użycie ng-if.

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

Dlaczego ng-if and not ng-hide? Ponieważ chcesz selektory css, które będą kierować pierwszą opcję wewnątrz powyżej, wybierz opcję "rzeczywistą", a nie tę, która jest ukryta. Przydaje się to, gdy używasz kątomierza do testowania e2e i (z dowolnego powodu) używasz by.css(), aby kierować wybrane opcje.

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

Rozwiązanie powyżej woli skorumpowanego modelu z danymi śmieci. Proszę użyć dyrektywy zresetować model w odpowiedni sposób JS: Wybierz Option

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>