Cara Membuat Seleksi Gambar Menggunakan AngularJS

Halo teman teman pada tutorial kali ini saya akan menjelaskan tentang Cara Membuat Seleksi Gambar Menggunakan AngularJS, pada tutorial Cara Membuat Seleksi Gambar Menggunakan AngularJS ketika gambar yang kita klik maka otomatis akan terseleksi dengan sendirinya, nah biar teman teman lebih paham lagi kita langsung saja masuk ke study casenya tentang Cara Membuat Seleksi Gambar Menggunakan AngularJS.

Langkah pertama yaitu silahkan teman teman buat 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 Membuat 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;{{selected_image || '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>

pada script <img ng-src=”./images/{{image}}.png”> yang terdapat pada file index diatas berfungsi untuk menempatkan file gambar, jadi untuk gambarnya silahkan teman teman buat sebuah file baru yang bernama images dan silahkan simpan gambarnya pada folder tersebut.

Berikutnya kita akan buat file cssnya untuk 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 buat file untuk menampilkan file gambar yang ingin kita seleksi dan kita tampilkan pada 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;
        }
    }
}

jika dijalankan pada browser maka hasilnya akan seperti dibawah ini,

Bagai mana teman-teman cukup mudah bukan, Cara Membuat Seleksi Gambar Menggunakan AngularJS, nya

Sekian dulu tutorial saya kali ini tentang Cara Membuat Seleksi Gambar Menggunakan AngularJS semoga bermanfaat.

Terimakasih.

Download Script