Cara Membuat Seleksi Gambar Menggunakan AngularJS
Halo teman teman di panduan kali ini saya akan menjelaskan mengenai Cara Merancang Seleksi Gambar Menggunakan AngularJS, di panduan Cara Merancang Seleksi Gambar Menggunakan AngularJS ketika gambar yang kita klik karenanya otomatis akan terseleksi dengan sendirinya, nah biar teman teman lebih paham lagi kita seketika saja masuk ke study casenya mengenai Cara Merancang Seleksi Gambar Menggunakan AngularJS.
Langkah pertama-tama yaitu silahkan teman teman bikin sebuah file baru dengan nama index.html, dan silahkan teman teman simpan script dibawah ini dengan nama index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>Cara Merancang Seleksi Gambar Menggunakan AngularJS</title>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js></script>
<script src=image.js></script>
<link rel=stylesheet href=http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css>
<link rel=stylesheet href=style.css>
</head>
<body ng-controller=ImagePickerCtrl>
<div class=row-fluid>
<div class=span8 offset2>
<div class=row-fluid>
<div class=alert alert-info>
Pilih Gambar: nbsp;{ 'Belum Memilih'}
</div>
</div>
<div class=row-fluid>
<div ng-repeat=image in all_images>
<div class=span1 ng-click=selectImage(image) ng-class={'selected-image': (selected_image === image)}>
<div>
{{image}}
</div>
<img ng-src=./images/{{image}}.png>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
di script <img ng-src=”./images/{{image}}.png”> yang terdapat di file index diatas berfungsi bagi menempatkan file gambar, jadi bagi gambarnya silahkan teman teman bikin sebuah file baru yang bernama images dan silahkan simpan gambarnya di folder tersebut.
Berikutnya kita akan bikin file cssnya bagi mengatur layout atau tampilannya, dan silahkan teman teman simpan script dibawah ini dengan nama style.css
.selected-image {
border-color: green;
border-style: solid;
border-width: thick;
Selanjudnya kita akan bikin file bagi menampilkan file gambar yang ingin kita seleksi dan kita tampilkan di browser, dan simpan script dibawah ini dengan nama image.js
function ImagePickerCtrl($scope) {
$scope.all_images = [1,2,3,4,5,6,7,8,9,10];
$scope.selectImage = function (image) {
if($scope.selected_image === image) {
$scope.selected_image = '';
}
else {
$scope.selected_image = image;
}
}
}apabila dijalankan di browser karenanya hasilnya akan seperti dibawah ini,
Bagai mana teman-teman lumayan gampang bukan, Cara Merancang Seleksi Gambar Menggunakan AngularJS, nya
Demikianlah dulu panduan saya kali ini mengenai Cara Merancang Seleksi Gambar Menggunakan AngularJS semoga bermanfaat.
Terimakasih.
Sumber https://kursuswebsite.org
