AngularJS SELECT (Pilih Kotak)
AngularJS dapat menggunakan array atau objek untuk membuat opsi daftar drop-down.
Gunakan NG-opsi untuk membuat kotak pilihan
Di AngularJS, kita dapat menggunakan arahan NG-option untuk membuat daftar drop-down, dan item daftar adalah loop output melalui objek dan array, seperti yang ditunjukkan pada contoh berikut:
Contoh
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="myCtrl"><select ng-model = "SelectedName" ng-options = "x for x in names"> </sfect> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.names = ["google", "runooby"; menunjukkan penggunaan arahan opsi NG. </p> </body> </html>Hasil Menjalankan:
Contoh ini menunjukkan penggunaan arahan NG-opsi.
NG-opsi dan NG-repeat
Kami juga dapat menggunakan Petunjuk NG-RePeat untuk membuat daftar drop-down:
Contoh
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> <pect> <option ng-repeat = "x in name"> {{x}} </pection> </select> </div> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ('myapp', [] {$ scope) {"scope) {" myctrl ', "mypop'," mypop ', "mypop'," mypop ', $ {"mycrler (' myctrl '," mycrler (' myctrl ', $ {' myctrl ', $ "Taobao"];}); </script> <p> Contoh ini menunjukkan menggunakan arahan NG-RePeat untuk membuat daftar drop-down. </p> </body> </html>Hasil Menjalankan:
Contoh ini menunjukkan menggunakan arahan NG-RePeat untuk membuat daftar drop-down.
Petunjuk NG-Repeat menggunakan array untuk melingkarkan kode HTML untuk membuat daftar drop-down, tetapi arahan NG-options lebih cocok untuk membuat daftar drop-down, dan memiliki keunggulan berikut:
Objek yang menggunakan opsi NG-options, NG-Repeat adalah string.
Mana yang seharusnya lebih baik?
Misalkan kita menggunakan objek berikut:
$ scope.sites = [{Situs: "Google", URL: "http://www.google.com"}, {situs: "runoob", url: "http://www.runoob.com"}, {situs: "taobao", url: "http://a;NG-Repeat memiliki keterbatasan, dan nilai yang dipilih adalah string:
Contoh
Gunakan NG-RePeat:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller="myCtrl"><p>Select a website:</p><select ng-model="selectedSite"><option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option></select><h1>You have chosen: {{SelectedSite}} </h1> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.sites = [{site: "google", url: "http://ww.gw. "http://www.runoob.com"}, {situs: "taobao", url: "http://www.taobao.com"}];}); </script> <p> Contoh ini menunjukkan menggunakan arahan NG-repeat untuk membuat daftar drop-down, dan nilai yang dipilih. </p> </body> </html>Efek Menjalankan:
Pilih situs web:
Pilihan Anda adalah: http://www.google.com
Contoh ini menunjukkan menggunakan arahan NG-Repeat untuk membuat daftar drop-down, dengan nilai yang dipilih menjadi string.
Menggunakan arahan NG-options, nilai yang dipilih adalah objek:
Contoh
Gunakan NG-opsi:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> <p> Pilih situs web: </p> <pilih ng-model = "selectedsite" ng-options = "x.site untuk x di situs"> </ pilih> <h1> Anda telah memilih: {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{p> {{selectedSite.url}}</p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.sites = [ {site : "Google", url : "http://www.google.com"}, {site : "Runoob", url : "http://www.runoob.com"}, {situs: "taobao", url: "http://www.taobao.com"}];}); </script> <p> Contoh ini menunjukkan penggunaan NG-options. </p> </body> </html>Efek Menjalankan:
Pilih situs web:
Anda memilih: Google
URL adalah: http://www.google.com
Contoh ini menunjukkan menggunakan arahan NG-options untuk membuat daftar drop-down, dengan nilai yang dipilih menjadi objek.
Saat memilih nilai sebagai objek, kita bisa mendapatkan informasi lebih lanjut dan aplikasi lebih fleksibel.
Sumber Data sebagai Objek
Dalam contoh sebelumnya, kami menggunakan array sebagai sumber data, dan di bawah ini kami menggunakan objek data sebagai sumber data.
$ scope.sites = {Site01: "Google", situs02: "runoob", situs03: "taobao"};NG-options menggunakan objek yang sangat berbeda, sebagai berikut:
Contoh
Gunakan objek sebagai sumber data, x adalah kunci dan y adalah nilainya:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> <p> Situs web yang Anda pilih adalah: </p> <pilih ng-model = "SelectedSite" NG-options = "x untuk (x, y) di situs"> </select> <h1> nilai yang Anda pilih adalah: {{{{{{{{{{{{{{{{{{yang dipilih {{yang dipilih. </p> <script> var app = angular.module ('myApp', []); app.controller ('myctrl', function ($ scope) {$ scope.sites = {site01: "google", site02: "runoob", site03: "taoBao"};}); </script>, site03: "taobao"};};Efek Menjalankan:
Situs web yang dipilih adalah:
Nilai yang Anda pilih adalah: Google
Contoh ini menunjukkan penggunaan objek sebagai daftar drop-down Buat.
Nilai yang Anda pilih adalah nilai dalam pasangan nilai kunci.
Nilai juga bisa menjadi objek dalam pasangan nilai kunci:
Contoh
Nilai yang dipilih berada dalam nilai pasangan nilai kunci, yang merupakan objek:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> <p> Pilih mobil: </p> <pilih ng-model = "selectedCar" ng-options = "x for (x, y) dalam mobil"> </pilih> <h1> Anda memilih: {{selectedCar.brand}} </h1> <H2> Model: {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{h2> </h2> {{selectedCar.model}} </h2> <h3> warna: {{selectedCar.color}} </h3> <p> Perhatikan bahwa nilai yang dipilih adalah objek. </p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.cars = { car01 : {brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Fiat", model : "500", color : "white"}, car03: {brand: "volvo", model: "xc90", warna: "hitam"}}}); </script> </body> </html>Hasil Menjalankan:
Pilih mobil
Anda memilih: Fiat
Model: 500
Warna: Putih
Catatan: Nilai yang dipilih adalah objek.
Anda juga dapat menggunakan kunci pada pasangan nilai kunci alih-alih menggunakan pasangan nilai kunci, dan menggunakan properti objek secara langsung:
Contoh:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip> </head> <body> <dv norg-p = " ng-controller = "myctrl"> <p> Pilih mobil: </p> <pilih ng-model = "selectedcar" ng-options = "y.brand untuk (x, y) di mobil"> </pilih> <p> Anda telah memilih: {{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{p> {{selectedCar.model}} </p> <p> Warnanya adalah: {{selectedCar.color}} </p> <p> Opsi dalam daftar drop-down juga dapat berupa atribut objek. </p></div><script>var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) { $scope.cars = { car01 : {brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Fiat", model : "500", color : "white"}, car03: {brand: "volvo", model: "xc90", warna: "hitam"}}}); </script> </body> </html>Hasil Menjalankan:
Pilih mobil:
Pilihan Anda adalah: Ford
Model: Mustang
Warna adalah: merah
Opsi dalam daftar drop-down juga dapat menjadi atribut objek.
Di atas adalah kompilasi informasi pilih AngularJS, dan kami akan terus menambahkannya nanti. Saya berharap ini dapat membantu teman yang membutuhkan.