AngularJS select
AngularJS massiv yoki obyektdagi elementlar asosida ochiluvchi ro‘yxatlar yaratish imkonini beradi.
ng-options yordamida select ro‘yxatini yaratish
AngularJS’da obyekt yoki massiv asosida ochiluvchi ro‘yxat yaratmoqchi bo‘lsangiz, ng-options direktivasidan foydalanishingiz kerak:
Misol
<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>
O‘zingiz sinab ko‘ring »
ng-options va ng-repeat
Xuddi shu ochiluvchi ro‘yxatni yaratish uchun ng-repeat direktivasidan ham foydalanishingiz mumkin:
ng-repeat direktivasi massivdagi har bir element uchun HTML kod blokini takrorlagani sababli, undan ochiluvchi ro‘yxatda variantlar (option) yaratish uchun foydalanish mumkin, ammo ng-options direktivasi aynan ochiluvchi ro‘yxatni variantlar bilan to‘ldirish uchun yaratilgan.
Qaysi biridan foydalanish kerak?
ng-repeat direktivasidan ham, ng-options direktivasidan ham foydalanishingiz mumkin:
Sizda obyektlar massivi bor deb faraz qilaylik:
$scope.cars = [
{model : "Ford Mustang", color : "red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Misol
ng-repeat yordamida:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
O‘zingiz sinab ko‘ring »
Qiymatni obyekt sifatida ishlatganda value o‘rniga ng-value ishlating:
Misol
ng-repeat bilan qiymatni obyekt sifatida ishlatish:
<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>
O‘zingiz sinab ko‘ring »
Misol
ng-options yordamida:
<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>
O‘zingiz sinab ko‘ring »
Tanlangan qiymat obyekt bo‘lganda u ko‘proq ma’lumotni saqlashi mumkin va ilovangiz yanada moslashuvchan bo‘ladi.
Ushbu darslikda ng-options direktivasidan foydalanamiz.
Ma’lumotlar manbai sifatida obyekt
Oldingi misollarda ma’lumotlar manbai massiv edi, ammo obyektdan ham foydalanishimiz mumkin.
Sizda kalit-qiymat juftliklariga ega obyekt bor deb faraz qilaylik:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
Obyektlar uchun ng-options atributidagi ifoda biroz farq qiladi:
Misol
Obyektni ma’lumotlar manbai sifatida ishlatganda x kalitni, y esa qiymatni ifodalaydi:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
O‘zingiz sinab ko‘ring »
Tanlangan qiymat har doim kalit-qiymat juftligidagi qiymat bo‘ladi.
Kalit-qiymat juftligidagi qiymat obyekt ham bo‘lishi mumkin:
Misol
Tanlangan qiymat baribir kalit-qiymat juftligidagi qiymat bo‘ladi, faqat bu safar u obyekt:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
O‘zingiz sinab ko‘ring »
Ochiluvchi ro‘yxatdagi variantlar kalit-qiymat juftligidagi kalit bo‘lishi shart emas, ular qiymat yoki qiymat obyektining xususiyati ham bo‘lishi mumkin:
Misol
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!