Pada artikel kali ini saya akan memberikan tips dan trik bagaimana Cara Membuat List Detail Sederhana Dengan Angularjs, kita akan membuat sebuah option dan jika pilih option tersebut akan muncul spesifikasi macam – macam mobil. Kita buat dengan Angularjs yang mana Angularjs ini framework nya javascript. Dan pasti nya prosesnya sangat cepat atau tidak ada load, dengan menggunakan Angularjs kita bisa gabungkan juga dengan PHP atau dengan yang lainnya. Baik gambar di bawah ini yang akan nanti kita buat
Bisa kalian lihat pada gambar di atas, ketika pilih jenis mobil akan muncul spesifikasi dari mobil yang di pilih. Ini biasa di pakai pada website jual beli mobil tetapi kita buat lebih sederhana dulu, baru nanti jika teman-teman sudah menguasai dengan mudah memodifikasinya. Oke sekarang kita akan langsung implementasikan Cara Membuat List Detail Sederhana Dengan Angularjs, seperti biasa siapkan text editornya dan copy script html nya di bawah ini
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat List Detail Sederhana Dengan Angularjs</title>
</head>
<body>
<div>
<h1>Pilih Mobil Yang tersedia</h1>
<select></select>
</div>
</body>
</html>Dan paste kan pada text editor nya, lalu save dengan index.html. Kemudian tambahkan style css nya di bawah ini
select{padding: 5px; width: 200px; text-align: center; color:orange; font-weight: bold;font-size: 24px}
Berikutnya kita akan berikan Angularjs nya, sebelum memulai teman – teman jangan lupa berikan library Angularjs nya di dalam tag <head>. Kalian bisa ambil di website resminya https://angularjs.org/
Nah baru kita berikan ng-app, ng-controller, dan ng-model, teman – teman sisipkan fungsi Angularjs nya pada tag select dan tag div ikuti seperti gambar di bawah ini yang saya beri kotak berwarna merah
Berikutnya kita panggil ng-app dan ng-controller nya dan buat list – list spesifikasi mobil nya
<script>
var app = angular.module('myApp', []);
app.controller('controller', function($scope) {
$scope.cars = {
car1 : {mobil :"Jazz" ,merk : "Honda", warna : "Hitam", tahun : "2017"},
car2: {mobil :"Avanza" ,merk : "Toyota", warna : "Putih", tahun : "2015"},
car3: {mobil :"Agya" ,merk : "Toyota", warna : "Putih", tahun : "2016"},
car4: {mobil :"Baleno" ,merk : "Suzuki", warna : "Merah", tahun : "2000"},
car5 : {mobil :"Mobilio" ,merk : "Honda", warna : "Silver", tahun : "2009"}
}
});
</script>
Selanjutnya kita akan tampilkan, teman – teman tambahkan script untuk menampilkan nya seperti gambar di bawah ini yang saya beri kotak warna orange
Jika sudah, save dan jalankan pada browser nya. Maka hasilkan seperti di bawah ini
Jika saya pilih salah satu dari option akan muncul spesifikasinya
Sangat mudah bukan,,,?!?
Oke sekian dulu pada tutorial Dumet School tentang Cara Membuat List Detail Sederhana Dengan Angularjs, kita jumpa lagi pada artikel berikutnya. Semoga Bermanfaat, sampai jumpa dan Terimakasih.
The post Cara Membuat List Detail Sederhana Dengan Angularjs appeared first on Kursus Website Terbaik.