AngularJS Seçim Kutuları
AngularJS, bir dizideki öğelere veya bir nesneye dayalı olarak açılır listeler oluşturmanıza olanak tanır.
ng-seçeneklerini Kullanarak Bir Seçim Kutusu Oluşturma
AngularJS'de bir nesneye veya diziye dayalı bir açılır liste oluşturmak istiyorsanız, ng-optionsyönergeyi kullanmalısınız:
Ö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>
seçeneklerin-tekrarın karşılaştırılması
ng-repeatAynı açılır listeyi yapmak için yönergeyi de kullanabilirsiniz :
Örnek
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Yönerge, bir dizideki her öğe için bir HTML kodu bloğunu tekrar ettiğinden, ng-repeatbir açılır listede seçenekler oluşturmak için kullanılabilir, ancak ng-optionsyönerge özellikle bir açılır listeyi seçeneklerle doldurmak için yapılmıştır.
Ne Kullanırım?
ng-repeatHem yönergeyi hem de yönergeyi kullanabilirsiniz ng-options:
Bir dizi nesneniz olduğunu varsayalım:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Örnek
kullanarak ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Değeri bir nesne olarak kullanırken, ng-valueşunun yerine kullanın value:
Örnek
ng-repeatNesne olarak kullanma :
<select ng-model="selectedCar">
<option ng-repeat="x in cars" ng-value="{{x}}">{{x.model}}</option>
</select>
<h1>You selected a {{selectedCar.color}} {{selectedCar.model}}</h1>
Örnek
kullanarak ng-options:
<select ng-model="selectedCar" ng-options="x.model for x in cars">
</select>
<h1>You selected: {{selectedCar.model}}</h1>
<p>Its color is: {{selectedCar.color}}</p>
Seçilen değer bir nesne olduğunda daha fazla bilgi tutabilir ve uygulamanız daha esnek olabilir.
ng-optionsBu eğitimde yönergeyi kullanacağız .
Bir Nesne Olarak Veri Kaynağı
Önceki örneklerde veri kaynağı bir diziydi, ancak bir nesneyi de kullanabiliriz.
Anahtar/değer çiftlerine sahip bir nesneniz olduğunu varsayalım:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
Nitelikteki ifade, ng-optionsnesneler için biraz farklıdır:
Örnek
Bir nesneyi veri kaynağı olarak kullanmak x, anahtarı
y
temsil eder ve değeri temsil eder:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
Seçilen değer her zaman bir anahtar- değer çiftindeki değer olacaktır.
Bir anahtar- değer çiftindeki değer bir nesne de olabilir:
Örnek
Seçilen değer, anahtar- değer çiftindeki değer olmaya devam edecektir , ancak bu sefer bir nesnedir:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Açılır listedeki seçeneklerin bir anahtar -değer çiftindeki anahtar olması gerekmez, ayrıca değer nesnesinin değeri veya özelliği de olabilir:
Örnek
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>