Dikkat edilmesi gereken bir şey, ngOptions'ın çalışması için ngModel'in gerekli olduğudur ... ng-model="blah""$ scope.blah öğesini seçilen değere ayarla" ifadesine dikkat edin.
Bunu dene:
<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>
AngularJS'nin belgelerinden daha fazla bilgi (daha önce görmediyseniz):
dizi veri kaynakları için:
- dizideki değer etiketi
- dizideki değer için etiket olarak seç
- dizideki değere göre grupla etiketle = dizideki değere göre grupla grupla seç
nesne veri kaynakları için:
- nesnede (anahtar, değer) etiketi
- nesnede (anahtar, değer) için etiket olarak seç
- nesnede (anahtar, değer) için gruplandırma etiketi
- nesnede (anahtar, değer) için gruplara göre etiket grubu olarak seç
AngularJS'deki seçenek etiketi değerleri hakkında bazı açıklamalar için:
Kullandığınızda ng-options, ng-options tarafından yazılan seçenek etiketlerinin değerleri her zaman seçenek etiketinin ilgili dizi öğesinin dizini olacaktır . Bunun nedeni, AngularJS'nin aslında sadece ilkel türler değil, belirli kontrollerle tüm nesneleri seçmenize izin vermesidir. Örneğin:
app.controller('MainCtrl', function($scope) {
$scope.items = [
{ id: 1, name: 'foo' },
{ id: 2, name: 'bar' },
{ id: 3, name: 'blah' }
];
});
<div ng-controller="MainCtrl">
<select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
<pre>{{selectedItem | json}}</pre>
</div>
Yukarıdaki, tüm nesneyi $scope.selectedItemdoğrudan seçmenize izin verecektir . Mesele şu ki, AngularJS ile seçenek etiketinizde ne olduğu konusunda endişelenmenize gerek yok. AngularJS bunu halletsin; sadece modelinizde nelerin bulunduğuna dikkat etmelisiniz.
Yukarıdaki davranışı gösteren ve yazılan HTML'yi gösteren bir dalgıç
Varsayılan seçenekle ilgilenmek:
Varsayılan seçenekle ilgili olarak yukarıda bahsetmediğim birkaç şey var.
İlk seçeneği seçme ve boş seçeneği kaldırma:
Bunu, tekrarladığınız öğelerdeki ilk öğeye ng-initmodeli (itibaren ng-model) ayarlayan bir basit ekleyerek yapabilirsiniz ng-options:
<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>
Not: Bu foo"falsy" bir şeye düzgün bir şekilde başlatılması durumunda biraz deli olabilir . Bu durumda foo, büyük olasılıkla denetleyicinizde başlatılmasını işlemek isteyeceksiniz .
Varsayılan seçeneği özelleştirme:
Bu biraz farklı; burada yapmanız gereken tek şey, boş bir değer özelliğiyle seçtiğiniz bir alt öğe olarak bir seçenek etiketi eklemek ve ardından iç metnini özelleştirmek:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="">Nothing selected</option>
</select>
Not: Bu durumda, farklı bir seçenek seçtikten sonra bile "boş" seçeneği orada kalacaktır. AngularJS altındaki seçimlerin varsayılan davranışı için durum böyle değildir.
Bir seçim yapıldıktan sonra gizlenen özelleştirilmiş bir varsayılan seçenek:
Bir değer seçtikten sonra özelleştirilmiş varsayılan seçeneğinizin kaybolmasını istiyorsanız, varsayılan seçeneğinize bir ng-hide özelliği ekleyebilirsiniz:
<select ng-model="foo" ng-options="item as item.name for item in items">
<option value="" ng-if="foo">Select something to remove me.</option>
</select>