AngularJS Pilih (centang kotak)

Sebelumnya: AngularJS ng-nilai instruksi

AngularJS dapat membuat daftar drop-down pilihan untuk menggunakan sebuah array atau objek.

Membuat kotak pilihan menggunakan ng-opsi

Dalam AngularJS kita dapat menggunakan perintahng-opsi untuk membuat daftar drop-down, daftar item melalui objek dan array siklus output, berikut contoh:

contoh

var aplikasi = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ lingkup) {
$ Scope.names = [ "Google", "w3big", "Taobao"];
});

</ Script>

Coba »

ng-pilihan dan ng-repeat

Kita juga bisa menggunakan direktifng-repeat untuk membuat daftar drop-down:

contoh

Coba »

instruksing-repeat adalah untuk loop melalui array kode HTML untuk membuat daftar drop-down, tapi ng-opsiperintah lebih cocok untuk membuat daftar drop-down, ia memiliki keuntungan sebagai berikut:

Sebuah objek menggunakanopsi ng-opsi,ng-repeat adalah string.

Ini harus digunakan yang lebih baik?

Misalkan kita menggunakan benda-benda berikut:

$scope.sites = [
    {site : "Google", url : "http://www.google.com"},
    {site : "w3big", url : "http://www.w3big.com"},
    {site : "Taobao", url : "http://www.taobao.com"}
];

ng-repeat memiliki keterbatasan, nilai yang dipilih adalah string:

contoh

Gunakanng-repeat:

<Pilih ng-model = "selectedSite ">
<Option ng-repeat = "x di situs" value = "{{x.url}}"> {{x.site}} </ option>
</ Pilih>

<H1> Pilihan Anda adalah: {{selectedSite}} </ h1>

Coba »

Gunakanng-opsi perintah, pilih nilai dari sebuah objek:

contoh

Gunakanng-opsi:

<Pilih ng-model = "selectedSite " ng-opsi = "x.site untuk x di situs">
</ Pilih>

<H1> Pilihan Anda adalah: {{selectedSite.site}} </ h1>
<P> URL adalah: {{selectedSite.url}} </ p>

Coba »

Bila Anda memilih nilai adalah obyek, kita bisa mendapatkan informasi lebih lanjut dan aplikasi yang lebih fleksibel.

objek sumber data

contoh sebelumnya kita menggunakan array sebagai sumber data, kita memiliki objek data berikut sebagai sumber data.

$scope.sites = {
    site01 : "Google",
    site02 : "w3big",
    site03 : "Taobao"
};

ng-pilihan menggunakan benda-benda yang sangat berbeda, sebagai berikut:

contoh

Menggunakan objek sebagai sumber data,x adalah kunci (key),y adalah nilai (value):

<Pilih ng-model = "selectedSite " ng-opsi = "x untuk (x, y) di situs">
</ Pilih>

<H1> nilai yang Anda pilih: {{selectedSite}} </ h1>

Coba »

Pilihan Anda adalah nilai berpasangan nilai key.

nilai dalam pasangan nilai key juga bisa menjadi target:

contoh

Pilih nilai nilai key dari nilai, yang adalah bahwa hal itu adalah obyek:

$ Scope.cars = {
car01: {merek: "Ford" , Model: "Mustang", warna: "merah"},
car02: {merek: "Fiat" , Model: "500", warna: "putih"},
car03: {merek: "Volvo" , Model: "XC90", warna: "hitam"}
};

Coba »

Tidak dapat digunakan pasangan kunci -nilai kunci, menggunakan sifat-sifat suatu objek secara langsung dalam menu drop-down: