Angularjs Bir dizide veya bir nesnede öğelere göre açılır listeler oluşturmanızı sağlar.
ng-seçenekleri kullanarak bir Seç Kutusu Oluşturma
Eğer bir nesne veya angularjs bir dizide dayalı bir açılan liste oluşturmak istiyorsanız, kullanmanız gereken ng-option yönergesi:
Örnek
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName"
ng-options="x for x in names">
</select>
</div>
<script>
var app = angular. module('myApp', []) ;
app. controller('myCtrl',
function($scope) {
$scope.names = ["Emil", "Tobias" ,
"Linus"];
});
</script>
Kendin dene " ng-tekrarı vs ng-seçenekleri
Ayrıca kullanabilirsiniz ng-repeat Aynı açılır listesini yapmak için yönergesi:
Çünkü ng-repeat yönergesi Bir dizide her öğe için HTML kod bloğunu tekrarlar, bir açılır listede seçenekler oluşturmak için kullanılabilir, ancak ng-options yönergesi özellikle seçenekleri içeren bir açılır liste doldurmak için yapılmış ve vardır en az bir önemli avantajı:
Ile yapılan açılır listesini ng-options yapılmış DROPDOWNS ise, seçilen değer bir amacı olmasını sağlar ng-repeat bir dize olmak zorundadır.
Ne kullanıyor musunuz?
Eğer nesneler dizisi var varsayalım:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
]; ng-repeat yönergesi, seçilen değer bir dize olmalıdır 's sınırlamaları vardır:
Örnek
Kullanma ng-repeat :
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Kendin dene " Kullanırken ng-options yönergesi, seçilen değer bir nesne olabilir:
Örnek
Kullanılması ng-options :
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>It's color is: {{selectedCar.color}}</p>
Kendin dene " Seçilen değer bir nesne olabilir, bu daha fazla bilgi tutabilir ve başvurunuzun daha esnek olabilir.
Biz kullanacağız ng-options Bu eğitimde yönergeyi.
bir nesne olarak Veri Kaynağı
Önceki örneklerde veri kaynağı, bir dizi, ama aynı zamanda bir nesne kullanabilir.
Eğer anahtar değeri çiftleri ile bir nesne olması varsayalım:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}; Içinde ifade ng-options özniteliği nesneler için biraz farklıdır:
Örnek
Veri kaynağı olarak bir nesne kullanılarak, x anahtarı temsil eder ve y değeri temsil eder:
<select ng-model="selectedCar" ng-options=" x for (x, y) in cars ">
</select>
<h1>You selected: {{selectedCar}}</h1>
Kendin dene " Seçilen değeri her zaman bir anahtar değer çifti değeri olacaktır.
Bir anahtar değer çiftinde değeri de bir nesne olabilir:
Örnek
Seçilen değeri hala bir anahtar değer çifti değeri olacaktır, ancak bu kez bir amacıdır:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Kendin dene " Anahtar-değeri çifti anahtarı olmak zorunda değildir açılır listedeki seçenekler, aynı zamanda değeri veya değer nesnesinin bir özelliği olabilir:
Örnek
<select ng-model="selectedCar" ng-options=" y.brand for (x, y) in cars">
</select>
Kendin dene "