Kotak Pilih AngularJS
AngularJS memungkinkan Anda membuat daftar dropdown berdasarkan item dalam array, atau objek.
Membuat Kotak Pilih Menggunakan opsi-ng
Jika Anda ingin membuat daftar dropdown, berdasarkan objek atau array di AngularJS, Anda harus menggunakan ng-optionsarahan:
Contoh
<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>
of-options vs of-repeat
Anda juga dapat menggunakan ng-repeatarahan untuk membuat daftar dropdown yang sama:
Contoh
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
Karena ng-repeatdirektif mengulangi blok kode HTML untuk setiap item dalam array, itu dapat digunakan untuk membuat opsi dalam daftar dropdown, tetapi ng-optionsdirektif dibuat khusus untuk mengisi daftar dropdown dengan opsi.
Apa yang Saya Gunakan?
Anda dapat menggunakan ng-repeatdirektif dan ng-optionsdirektif:
Asumsikan Anda memiliki array objek:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
];
Contoh
Menggunakan ng-repeat:
<select ng-model="selectedCar">
<option ng-repeat="x in cars" value="{{x.model}}">{{x.model}}</option>
</select>
<h1>You selected: {{selectedCar}}</h1>
Saat menggunakan nilai sebagai objek, gunakan ng-valueinsead of value:
Contoh
Menggunakan ng-repeatsebagai objek:
<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>
Contoh
Menggunakan 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>
Ketika nilai yang dipilih adalah sebuah objek, itu bisa menyimpan lebih banyak informasi, dan aplikasi Anda bisa lebih fleksibel.
Kami akan menggunakan ng-optionsarahan dalam tutorial ini.
Sumber Data sebagai Objek
Dalam contoh sebelumnya, sumber data adalah array, tetapi kita juga dapat menggunakan objek.
Asumsikan Anda memiliki objek dengan pasangan nilai kunci:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
};
Ekspresi dalam ng-optionsatribut sedikit berbeda untuk objek:
Contoh
Menggunakan objek sebagai sumber data, xmewakili kunci, dan
y
mewakili nilai:
<select ng-model="selectedCar" ng-options="x for (x, y) in cars">
</select>
<h1>You selected: {{selectedCar}}</h1>
Nilai yang dipilih akan selalu menjadi nilai dalam pasangan nilai kunci .
Nilai dalam pasangan nilai kunci juga dapat berupa objek:
Contoh
Nilai yang dipilih akan tetap menjadi nilai dalam pasangan nilai kunci , hanya saja kali ini berupa objek:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Opsi dalam daftar dropdown tidak harus berupa kunci dalam pasangan kunci -nilai, bisa juga berupa nilai, atau properti dari objek nilai:
Contoh
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in cars">
</select>