ng-options İlk olarak ayarlamayı seçin her zaman boş

Question

Bir projede angularjs kullanıyorum ve içinde ng-options oluşturmak için kullanıyorum.

Başlangıçta sayfaları yeniden ne zaman ve hiçbir seçenek elemanı aşağıda gibi oluşturulan html seçilir:

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

Ama (ex Madde 2). Unsurunu seçtiğinizde ilk boş seçme gitti. Ng-modelinin seçili değer tarafından ayarlandığının bilincindeyim. Ama önce kullanıcının her zaman boş olmasını istiyorum, böylece kullanıcı filtreyi sıfırlayabilir.

Şimdiden teşekkürler.

Answer 1

Bu sizin için yapacağından: seçeneklerden biri (için "boş" olarak geçerli bir değer tedavi orada herkes için

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

Answer 2

En iyi seçeneğinizin, boş öğenin öğe listesindeki ilk öğe olarak dahil edilmiş olması gerektiği anlaşılıyor.

Answer 3

ng-options'u kullanarak ve bunun yerine ng-repeat kullanın ve ilk seçeneği boş bırakabilirsiniz. Aşağıdaki örneğe bakın.

<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

yüzden "boş" bir değer olduğunu hayal tipOptions içindeki öğelerden biri, aşağıdaki örnekte), otomatik olarak eklenen seçeneğin gizlendiğinden emin olmanın en basit yolun ng-if kullanmak olduğunu buldum.

<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? Çünkü, yukarıdaki ilk seçeneği hedefleyen css seçicilerinin, gizli olanı değil, "gerçek" seçeneği hedeflemesini istediklerinden. E2e testi için iletici kullandığınızda ve (her ne sebepten olursa olsun) seçim seçeneklerini hedeflemek için by.css() kullandığınızda işe yarar.

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

kötü isteklerine önemsiz veri modeli yukarıdaki çözüm. JS doğru şekilde modelini sıfırlamak için yönergesini kullanın: Seçenek

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

Kontrolör

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