AngularJS Select Boxes
Penggunaan elemen select (kotak pemilihan) dalam AngularJS memungkinkan pengguna memilih opsi dari daftar yang tersedia. Berikut ini contoh penggunaannya:
HTML:
htmlCopy code
<!DOCTYPE html>
<html ng-app="selectApp">
<head>
<title>Contoh Kotak Pemilihan AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="SelectController as selectCtrl">
<label>Pilih kendaraan:</label>
<select ng-model="selectCtrl.selectedVehicle">
<option value="">Pilih kendaraan</option>
<option ng-repeat="vehicle in selectCtrl.vehicles" value="{{ vehicle.id }}">{{ vehicle.name }}</option>
</select>
<p>Anda memilih: {{ selectCtrl.selectedVehicle }}</p>
</div>
</body>
</html>
JavaScript (app.js):
javascriptCopy code
angular.module('selectApp', [])
.controller('SelectController', function() {
this.vehicles = [
{ id: 1, name: 'Mobil' },
{ id: 2, name: 'Sepeda Motor' },
{ id: 3, name: 'Bus' },
];
this.selectedVehicle = "";
});
Dalam contoh ini, ng-app mendefinisikan aplikasi AngularJS, sementara ng-controller menentukan controller yang bertanggung jawab atas elemen select. Directive ng-model mengikat nilai yang dipilih ke variabel selectedVehicle dalam controller. Directive ng-repeat digunakan untuk membuat opsi-opsi dalam kotak pemilihan berdasarkan data kendaraan yang tersedia.
Pastikan Anda menyertakan pustaka AngularJS di HTML Anda (dalam contoh ini, melalui CDN) dan mendefinisikan modul AngularJS serta controller dalam file JavaScript terpisah (app.js dalam contoh ini).
Anda dapat menyesuaikan contoh ini dengan mengubah data kendaraan atau menambahkan logika tambahan dalam controller, seperti menangani perubahan nilai terpilih atau memanipulasi data terkait.
