Dlaczego AngularJS zawiera pustą opcję w select?

Pracuję z AngularJS przez ostatnie kilka tygodni i jedyne, co mnie naprawdę niepokoi, to to, że nawet po wypróbowaniu wszystkich permutacji lub konfiguracji określonej w specyfikacji na stronie http://docs.angularjs.org/api/ng .directive: select , wciąż dostaję pustą opcję jako pierwsze dziecko elementu select.

Oto Jadeit:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

Tutaj kontroler:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

Na koniec generowany jest kod HTML:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

Co muszę zrobić, aby się go pozbyć?

PS: Bez tego wszystko działa, ale wygląda dziwnie, jeśli używasz select2 bez wielokrotnego wyboru.

Puste optionjest generowane, gdy wartość, do której odwołuje się ng-model, nie istnieje w zestawie opcji przekazanych do ng-options. Dzieje się tak, aby zapobiec przypadkowemu wybraniu modelu: AngularJS widzi, że model początkowy jest niezdefiniowany lub nie znajduje się w zestawie opcji i nie chce samodzielnie decydować o wartości modelu.

Jeśli chcesz pozbyć się pustej opcji, po prostu wybierz wartość początkową w kontrolerze, na przykład:

$scope.form.type = $scope.typeOptions[0].value;

Oto jsFiddle: http://jsfiddle.net/MTfRD/3/

Krótko mówiąc: pusta opcja oznacza, że ​​nie został wybrany żaden prawidłowy model (przez prawidłowy mam na myśli: z zestawu opcji). Musisz wybrać prawidłową wartość modelu, aby pozbyć się tej pustej opcji.

Jeśli chcesz uzyskać wartość początkową, zobacz odpowiedź @ pkozlowski.opensource, którą informacje FYI można również zaimplementować w widoku (a nie w kontrolerze) za pomocą ng-init:

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

Jeśli nie chcesz wartości początkowej, „pojedynczy element zakodowany na stałe, z wartością ustawioną na pusty ciąg znaków, może być zagnieżdżony w elemencie. Ten element będzie wówczas reprezentował opcję zerową lub opcję„ nie wybrano ”:

<select ng-model="form.type" required="required"
  ng-options="option.value as option.name for option in typeOptions" >
    <option style="display:none" value="">select a type</option>
</select>

Kątowy <1,4

Dla każdego, kto traktuje „null” jako prawidłową wartość jednej z opcji (wyobraź sobie, że „null” jest wartością jednego z elementów w typeOptions w poniższym przykładzie), znalazłem ten najprostszy sposób, aby upewnić się, że automatycznie dodaje się opcja jest ukryta to użyć ng-if.

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

Dlaczego ng-if, a nie ng-hide? Ponieważ chcesz, aby selektory css były kierowane na pierwszą opcję powyżej, wybierz opcję „rzeczywistą”, a nie tę ukrytą. Przydaje się, gdy używasz kątomierza do testowania e2e i (z jakiegokolwiek powodu) używasz by.css (), aby celować w wybrane opcje.

Kątowe> = 1,4

Ze względu na refaktoryzację dyrektyw select i options używanie ng-ifnie jest już realną opcją, więc musisz się zwrócić, aby ng-show="false"znów działać.

Może przydatne dla kogoś:

Jeśli chcesz użyć zwykłych opcji zamiast opcji ng, możesz zrobić to tak:

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

Ustaw model w linii. Użyj ng-init, aby pozbyć się pustej opcji

Przydarzyło mi się coś podobnego i było spowodowane aktualizacją do wersji kątowej 1.5. ng-initwygląda na to, że jest analizowany pod kątem typu w nowszych wersjach Angulara. W starszych Angular ng-init="myModelName=600"odwzorowałby na opcję o wartości „600”, tj. <option value="600">First</option>Ale w Angular 1.5 nie znalazłby tego, ponieważ wydaje się, że spodziewa się znaleźć opcję o wartości 600 tj <option value=600>First</option>. Angular wstawiłby następnie losowy pierwszy element:

<option value="? number:600 ?"></option>

Kątowy <1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Kątowe> 1,2

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Wśród mnóstwa odpowiedzi tutaj, pomyślałem, że opublikuję rozwiązanie, które dla mnie zadziałało i spełniło wszystkie następujące warunki:

• podał symbol zastępczy / monit, gdy model ng jest fałszem (np. „--select region--” w. value="")
• gdy wartość modelu ng jest fałszem, a użytkownik otwiera menu rozwijane opcje, wybierany jest symbol zastępczy (inne wymienione tu rozwiązania powodują, że pierwsza opcja wydaje się wybrana, co może wprowadzać w błąd)
• pozwala użytkownikowi odznaczyć prawidłową wartość, zasadniczo ponownie wybierając wartość fałsz / wartość domyślna

kod

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

src

oryginalne pytania i odpowiedzi - https://stackoverflow.com/a/32880941/1121919

Szybkie rozwiązanie:

select option:empty { display:none }

Mam nadzieję, że to komuś pomoże. Idealnie, wybraną odpowiedzią powinno być podejście, ale jeśli to nie jest możliwe, powinno działać jako łatka.

Tak ng-model utworzy pustą wartość opcji, gdy właściwość ng-model będzie niezdefiniowana. Możemy tego uniknąć, przypisując obiekt do modelu ng

Przykład

kodowanie kątowe

$scope.collections = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement'}
];

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

Ważna uwaga:

Przypisz obiekt tablicy, taki jak $ scope.collections [0] lub $ scope.collections [1] do ng-model, nie używaj właściwości obiektu. jeśli otrzymujesz wartość opcji z serwera, używając funkcji oddzwaniania, przypisz obiekt do modelu ng

UWAGA z dokumentu kątowego

Uwaga: ngModel porównuje przez odniesienie, a nie wartość. Jest to ważne przy wiązaniu z tablicą obiektów. patrz przykład http://jsfiddle.net/qWzTb/

próbowałem wiele razy, w końcu to znalazłem.

Chociaż odpowiedzi zarówno @ pkozlowski.opensource, jak i @ Mark są poprawne, chciałbym udostępnić moją nieco zmodyfikowaną wersję, w której zawsze wybieram pierwszy element na liście, niezależnie od jego wartości:

<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>

Korzystam z Angulara 1.4x i znalazłem ten przykład, więc użyłem ng-init, aby ustawić wartość początkową w select:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

Napotkałem ten sam problem. Jeśli publikujesz formularz kątowy z normalnym postem, napotkasz ten problem, ponieważ kątowy nie pozwala na ustawienie wartości opcji w sposób, w jaki użyłeś. Jeśli otrzymasz wartość „form.type”, znajdziesz odpowiednią wartość. Musisz zaksięgować obiekt kątowy, który nie jest formalnym słupkiem.

Prostym rozwiązaniem jest ustawienie opcji z pustą wartością. ""Znalazłem, że eliminuje to dodatkową niezdefiniowaną opcję.

Ok, właściwie odpowiedź jest bardzo prosta: gdy istnieje opcja nie rozpoznana przez Angulara, obejmuje ona nudną. To, co robisz źle, to to, że kiedy używasz opcji ng, to czyta obiekt, powiedzmy[{ id: 10, name: test }, { id: 11, name: test2 }] right?

To właśnie musi być wartość twojego modelu, aby ocenić ją jako równą, powiedz, że chcesz, aby wybrana wartość wynosiła 10, musisz ustawić swój model na wartość podobną { id: 10, name: test }do wybrania 10, dlatego NIE utworzy tego kosza.

Mam nadzieję, że to pomaga wszystkim zrozumieć, miałem trudny czas próbując :)

To rozwiązanie działa dla mnie:

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

To zadziałało dla mnie

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

Działa to doskonale

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

działa to tak, że daje to pierwszą opcję do wyświetlenia przed wybraniem czegoś i display:noneusuwa to z listy rozwijanej, więc jeśli chcesz, możesz to zrobić

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

a to da ci select and optionprzed wyborem, ale po wybraniu zniknie i nie pojawi się w menu rozwijanym.

Wypróbuj ten w swoim kontrolerze, w tej samej kolejności:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' }, 
    { name: 'Bug', value: 'bug' }, 
    { name: 'Enhancement', value: 'enhancement' }
];
$scope.form.type = $scope.typeOptions[0];

Oto poprawka:

dla przykładowych danych, takich jak:

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

Wybierz opcję powinna wyglądać tak: -

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

Chodzi o to, że kiedy piszemy value.listCountjako value.listName, automatycznie wypełnia tekst, value.listNameale wartość wybranej opcji tovalue.listCount chociaż wartości moje pokazują normalne 0,1,2 .. i tak dalej !!!

W moim przypadku financeRef.financeLimitfaktycznie chwytam value.listCounti mogę dynamicznie manipulować w kontrolerze.

Chciałbym dodać, że jeśli wartość początkowa pochodzi z powiązania z jakiegoś elementu nadrzędnego lub komponentu 1.5, upewnij się, że przekazano odpowiedni typ. Jeśli używasz @w powiązaniu, przekazywana zmienna będzie ciągiem znaków, a jeśli opcjami są np. liczby całkowite, pojawi się pusta opcja.

Albo poprawnie parsuj wartość w init, albo powiązaj zi <nie @(mniej zalecane dla wydajności, jeśli nie jest to konieczne).

Proste rozwiązanie

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

Grind rozwiązanie z jQuery, gdy nie masz kontroli nad opcjami

HTML:

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

js:

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

Jeśli używasz ng-init swojego modelu do rozwiązania tego problemu:

<select ng-model="foo" ng-app ng-init="foo='2'">

miałem ten sam problem, ja (usunąłem „ng-model”) zmieniłem to:

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

do tego:

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

teraz działa, ale w moim przypadku było to spowodowane tym, że usunąłem ten zakres z ng.controller, sprawdź, czy nie zrobiłeś tego samego.

Cześć, miałem jakieś referencje mobilne jQUery i usunąłem je. W przypadku jQuery mobile żadna z powyższych poprawek nie działała dla mnie. (Świetnie, jeśli ktoś może wyjaśnić konflikt między jQuery Mobile i Angular JS)

https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html

Jedyną rzeczą, pracował dla mnie jest użycie track byw ng-optionsnastępujący sposób:

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

Zobacz przykład z dokumentacji angularjs, jak przezwyciężyć te problemy.

1. Przejdź do linku do dokumentacji tutaj
2. Znajdź „ Powiązanie zaznaczenia do wartości nieciągowej poprzez parsowanie / formatowanie ngModel ”
3. Widzisz tam, dyrektywa o nazwie „ convertToNumber ” rozwiązuje problem.

Mi to pasuje. Można również zobaczyć, jak to działa tutaj

Możemy użyć CSS, aby ukryć pierwszą opcję, ale to nie zadziała w IE 10, 11. Najlepszym sposobem jest usunięcie elementu za pomocą Jquery. To rozwiązanie działa w przypadku głównych przeglądarek testowanych w Chrome i IE10, 11

Również jeśli używasz kątowego, czasami używa setTimeout

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};