AngularJS neden seçime boş bir seçenek içeriyor?

AngularJS ile son birkaç haftadır çalışıyorum ve beni gerçekten rahatsız eden tek şey, tüm permütasyonları veya http://docs.angularjs.org/api/ng adresindeki spesifikasyonda tanımlanan yapılandırmayı denedikten sonra bile .directive: select , select öğesinin ilk alt öğesi olarak hala boş bir seçenek alıyorum.

İşte Yeşim:

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

İşte denetleyici:

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

Son olarak, oluşturulan HTML şu şekildedir:

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

Ondan kurtulmak için ne yapmam gerekiyor?

Not: İşler bu olmadan da çalışır, ancak select2'yi birden fazla seçim yapmadan kullanırsanız tuhaf görünür.

Boş option, tarafından başvurulan bir değer ng-modeliletilen bir seçenekler kümesinde yoksa oluşturulur ng-options. Bu, yanlışlıkla model seçimini önlemek için olur: AngularJS, başlangıç ​​modelinin seçenekler kümesinde tanımsız olduğunu veya tanımlanmadığını görebilir ve model değerine kendi başına karar vermek istemez.

Boş seçenekten kurtulmak istiyorsanız, kontrol cihazınızda bir başlangıç ​​değeri seçin, şuna benzer:

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

İşte jsFiddle: http://jsfiddle.net/MTfRD/3/

Kısacası: boş seçenek, geçerli bir modelin seçilmediği anlamına gelir (geçerli olarak demek istediğim: seçenekler kümesinden). Bu boş seçenekten kurtulmak için geçerli bir model değeri seçmeniz gerekir.

Bir başlangıç ​​değeri istiyorsanız, @ pkozlowski.opensource'un cevabına bakın; ng-init kullanarak görünümde (denetleyiciden ziyade) FYI de uygulanabilir:

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

Başlangıç ​​değeri istemiyorsanız, "boş bir dizeye ayarlanmış değeri olan tek bir sabit kodlu öğe, öğenin içine yerleştirilebilir. Bu öğe, null veya" seçili olmayan "seçeneği" temsil eder:

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

Açısal <1.4

Orada "null" seçeneklerinden biri için geçerli bir değer olarak davranan herkes için (bu yüzden "null" öğesinin, aşağıdaki örnekte typeOptions içindeki ), otomatik olarak eklendiğinden emin olmanın en basit yolunu buldum seçeneği gizli ise ng-if kullanmaktır.

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

Neden ng-if ve ng-hide değil? Yukarıdaki içindeki ilk seçeneği hedefleyecek css seçicilerinin, gizli olanı değil, "gerçek" seçeneği hedeflemeyi seçmesini istediğiniz için. İletkiyi e2e testi için kullandığınızda ve (herhangi bir nedenle) by.css () yöntemini kullanarak seçim seçeneklerini hedeflediğinizde kullanışlıdır.

Açısal> = 1.4

Seçme ve seçenek yönergelerinin yeniden düzenlenmesi nedeniyle, ng-ifkullanım artık uygun bir seçenek değildir, bu nedenle ng-show="false"yeniden çalışması için dönmeniz gerekir.

Belki birisi için yararlıdır:

Ng seçenekleri yerine düz seçenekler kullanmak istiyorsanız, aşağıdakileri yapabilirsiniz:

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

Modeli satır içi olarak ayarlayın. Boş seçeneklerden kurtulmak için ng-init kullanın

Bana da benzer bir şey oluyordu ve açısal 1.5'e yükseltilmesinden kaynaklanıyordu. ng-initiçin ayrıştırılmıyordur edilecek görünüyor tip açısal yeni sürümlerinde. Eski Angular'da ng-init="myModelName=600""600" değerine sahip bir seçeneğe eşleme yapılır, <option value="600">First</option>ancak Angular 1.5'te 600 değerine sahip bir seçenek bulmayı umduğu için bunu bulamaz <option value=600>First</option>. Açısal daha sonra rastgele bir ilk öğe ekler:

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

Açısal <1.2.x

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

Açısal> 1.2

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

Buradaki çok sayıda cevap arasında, benim için çalışan çözümü yeniden yayınlayacağımı ve aşağıdaki koşulların tümünü karşılayacağımı düşündüm :

• ng modeli sahte olduğunda bir yer tutucu / bilgi istemi sağladı (örneğin "--seç bölge--" w. value="")
• ng-model değeri yanlış olduğunda ve kullanıcı seçenekler açılır menüsünü açtığında yer tutucu seçilir (burada belirtilen diğer çözümler, yanıltıcı olabilecek ilk seçeneğin seçili görünmesini sağlar)
• Kullanıcının geçerli bir değerin seçimini kaldırmasına izin verin, temel olarak sahte / varsayılan değeri tekrar seçin

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

orijinal soru cevap - https://stackoverflow.com/a/32880941/1121919

Hızlı bir çözüm:

select option:empty { display:none }

Umarım birine yardımcı olur. İdeal olarak, seçilen cevap yaklaşım olmalıdır, ancak bu mümkün değilse bir yama olarak çalışmalıdır.

Evet, ng-model özelliği tanımsız olduğunda ng-model boş seçenek değeri oluşturur. Ng-modeline nesne atarsak bundan kaçınabiliriz

Misal

açısal kodlama

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

Önemli Not:

Ng-modeline $ scope.collections [0] veya $ scope.collections [1] gibi bir dizi nesnesi atayın, nesne özelliklerini kullanmayın. sunucudan seçenek değeri alıyorsanız, geri arama işlevini kullanarak, ng-modeline nesne atayın

Açısal belgeden NOT

Not: ngModel değerle değil referansla karşılaştırır. Bir nesne dizisine bağlanırken bu önemlidir. bir örneğe bakın http://jsfiddle.net/qWzTb/

sonunda defalarca denedim sonunda buldum.

Hem @ pkozlowski.opensource'un hem de @ Mark'ın cevaplarının doğru olmasına rağmen, değerinden bağımsız olarak listedeki ilk öğeyi her zaman seçtiğim biraz değiştirilmiş sürümümü paylaşmak istiyorum:

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

Açısal 1.4x kullanıyorum ve bu örneği buldum, bu yüzden seçimde başlangıç ​​değerini ayarlamak için ng-init kullandım:

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

Aynı sorunla karşılaştım. Normal gönderi ile açısal bir form gönderiyorsanız, açısal seçenekler için değerleri ayarladığınız şekilde ayarlamanıza izin vermediğiniz için bu sorunla karşılaşacaksınız. "Form.type" değerini alırsanız, doğru değeri bulacaksınız. Açısal nesneyi kendiniz form postası olarak değil, göndermelisiniz.

Basit bir çözüm, boş bir değeri olan bir seçenek ayarlamaktır, ""bu ekstra tanımlanmamış seçeneği ortadan kaldırır.

Tamam, aslında cevap çok basit: Angular tarafından tanınmayan bir seçenek olduğunda, donuk olanı içerir. Yanlış yaptığınız şey, ng-options kullandığınızda bir nesneyi okuyor,[{ id: 10, name: test }, { id: 11, name: test2 }] right?

Model değerinizin eşit olarak değerlendirilmesi için gereken budur, seçilen değerin 10 olmasını istediğinizi, modelinizi { id: 10, name: test }10 seçmek gibi bir değere ayarlamanız gerektiğini , bu nedenle bu çöpü OLMAYACAKTIR.

Umarım herkesin anlamasına yardımcı olur, çalışırken zor zamanlar geçirdim :)

Bu çözüm benim için çalışıyor:

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

Bu benim için çalıştı

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

Bu mükemmel çalışıyor

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

çalışma şekli, bunun bir şey seçmeden önce görüntülenecek ilk seçeneği vermesidir display:noneve açılır menüden kaldırır, böylece isterseniz

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

ve bu select and optionseçmeden önce size verecektir, ancak bir kez seçildikten sonra kaybolacak ve açılır listede görünmeyecektir.

Bunu kontrol cihazınızda aynı sırayla deneyin:

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

İşte düzeltme:

gibi bir örnek veri için:

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

Seçim seçeneği şu şekilde olmalıdır: -

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

Biz yazarken varlık noktası value.listCountolarak value.listName, otomatik metin doldurur value.listNameancak seçili seçeneğinin değeridirvalue.listCount değerleri 0,1,2, normal .. vb göstermek Gözat rağmen !!!

Benim durumumda, financeRef.financeLimitaslında kapma value.listCountve kontrolörde manipülasyonumu dinamik olarak yapabilirim.

Başlangıç ​​değeri bazı üst öğeden veya 1.5 bileşeninden bir bağlanma geliyorsa, uygun türün geçtiğinden emin olun. Kullanıyorsanız@ , iletilen değişken dize olur ve seçenekler ör. tamsayıların ardından boş seçenek görünecektir.

Her iki ayrıştırma doğru init değer ya da bağlanma <olup @(daha az gerekli olmadıkça performansı için tavsiye edilir).

Basit çözüm

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

Seçeneklerin kontrolü elinizde olmadığında jQuery ile öğütme çözümü

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();
}

Bu sorunu çözmek için modelinizi ng-init kullanıyorsanız:

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

aynı sorunu vardı, ben ("ng-model" kaldırıldı) bu değişti:

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

buna:

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

şimdi çalışıyor, ama benim durumumda bu kapsamı ng.controller'dan sildiğimden dolayı, aynı şeyi yapmadım mı kontrol edin.

Merhaba bazı jQUery mobil referansları vardı ve onları kaldırdım. JQuery mobile ile yukarıdaki düzeltmelerden herhangi biri benim için çalışmadı. (Birisi jQuery Mobile ve Angular JS arasındaki çatışmayı açıklayabilirse harika)

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

Benim için çalıştı tek şey kullanıyor track byyılında ng-optionsbu gibi:

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

Bu sorunların üstesinden gelmek için angularjs belgelerindeki örneğe bakın.

1. Buradaki dokümantasyon bağlantısına gidin
2. ' Seçimi ngModel ayrıştırma / biçimlendirme yoluyla dize olmayan bir değere bağlama '
3. Orada u görebilirsiniz, ' convertToNumber ' adlı direktif sorunu çözmek.

Benim için çalışıyor. Burada nasıl çalıştığını da görebilir

İlk seçeneği gizlemek için CSS kullanabiliriz, ancak IE 10, 11'de çalışmaz. En iyi yol, Jquery kullanarak öğeyi kaldırmaktır. Bu çözüm, krom ve IE10, 11'de test edilen büyük tarayıcı için çalışır

Ayrıca açısal kullanıyorsanız, bazen setTimeout kullanarak çalışır

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