AngularJS memungkinkan Anda membuat daftar dropdown berdasarkan item dalam array, atau obyek.
Membuat Pilih Kotak Menggunakan ng-opsi
Jika Anda ingin membuat daftar dropdown, berdasarkan objek atau array di AngularJS, Anda harus menggunakan ng-option direktif:
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>
Cobalah sendiri " ng-opsi vs ng-repeat
Anda juga dapat menggunakan ng-repeat direktif untuk membuat daftar dropdown yang sama:
Karena ng-repeat direktif mengulangi blok kode HTML untuk setiap item dalam array, dapat digunakan untuk membuat pilihan dalam daftar dropdown, tapi ng-options direktif dibuat khusus untuk mengisi daftar dropdown dengan pilihan, dan memiliki setidaknya satu keuntungan penting:
Dropdown dibuat dengan ng-options memungkinkan nilai yang dipilih untuk menjadi sebuah objek, sementara dropdown terbuat dari ng-repeat harus string.
Apa yang saya Gunakan?
Asumsikan Anda memiliki sebuah array dari objek:
$scope.cars = [
{model : "Ford Mustang", color :
"red"},
{model : "Fiat 500", color : "white"},
{model : "Volvo XC90", color : "black"}
]; The ng-repeat direktif memiliki keterbatasan itu, nilai yang dipilih harus string:
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>
Cobalah sendiri " Bila menggunakan ng-options direktif, nilai yang dipilih dapat menjadi objek:
Contoh
Menggunakan 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>
Cobalah sendiri " Ketika nilai yang dipilih dapat menjadi objek, dapat menampung lebih banyak informasi, dan aplikasi Anda bisa lebih fleksibel.
Kami akan menggunakan ng-options direktif dalam tutorial ini.
Data Sumber sebagai Obyek
Dalam contoh sebelumnya sumber data adalah array, tetapi kita juga bisa menggunakan objek.
Asumsikan Anda memiliki objek dengan pasangan kunci-nilai:
$scope.cars = {
car01 : "Ford",
car02 : "Fiat",
car03 : "Volvo"
}; Ekspresi dalam ng-options atribut sedikit berbeda untuk objek:
Contoh
Menggunakan objek sebagai sumber data, x mewakili kunci, dan y mewakili nilai:
<select ng-model="selectedCar" ng-options=" x for (x, y) in cars ">
</select>
<h1>You selected: {{selectedCar}}</h1>
Cobalah sendiri " Nilai yang dipilih akan selalu menjadi nilai dalam sepasang nilai key.
Nilai dalam sepasang nilai key juga bisa menjadi objek:
Contoh
Nilai yang dipilih masih akan menjadi nilai dalam sepasang nilai kunci-, hanya kali ini adalah obyek:
$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color :
"red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
Cobalah sendiri " Opsi dalam daftar dropdown tidak memiliki menjadi kunci dalam sepasang -nilai kunci, juga dapat menjadi nilai, atau properti dari objek nilai:
Contoh
<select ng-model="selectedCar" ng-options=" y.brand for (x, y) in cars">
</select>
Cobalah sendiri "