Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 4.2
Halo teman teman di panduan kali ini saya akan melanjutkan dari panduan sebelumnya, di panduan kali ini saya akan menjelaskan mengenai Basic-Basic yang dipelajari di Pada Angular JS Part 4.2 di panduan Basic-Basic yang dipelajari di Pada Angular JS Part 4.2 ini saya akan menjelaskan mengenai ng-click.
ng-click di angular berfungsi bagi menjalankan sebuah petunjuk di angular bagi menjalankan sesuatu ketika di click
oke teman teman kita seketika saja berikut Basic-Basic yang dipelajari di Pada Angular JS Part 4.2 menggunakan ng-click
yang pertama-tama silahkan buka text editornya kemudian silahkan simpan script dibawah ini dengan nama index.html
<!DOCTYPE html>
<html>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js></script>
<style>
img{width:50px; cursor:pointer;}
.container{width:500px; margin:auto}
article{background-color:gray;}
span{font-size:65px;}
.jarak {margin-right:20px; float:left;}
.bottom{background-color:#e1e1d6; height:80px; }
</style>
<body>
<div ng-app=myApp ng-controller=myCtrl>
<div class=container>
<article>
<div class=top>
<center><h1>ng-click</h1></center>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries,
but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing aplikasi like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class=bottom>
<div class=jarak>
<a ng-click=count = count + 1><img src=Basic-Basic yang dipelajari di Pada Angular JS Part 4.2-1.png></a>
<span>{{ count }}</span>
</div>
<div class=jarak>
<a ng-click=count2 = count2 + 1><img src=Basic-Basic yang dipelajari di Pada Angular JS Part 4.2-2.png></a>
<span>{{ count2 }}</span>
</div>
<div class=jarak>
<a ng-click=count3 = count3 + 1><img src=Basic-Basic yang dipelajari di Pada Angular JS Part 4.2-3.png></a>
<span>{{ count3 }}</span>
</div>
</div>
</article>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.count2 = 0;
$scope.count3 = 0;
});
</script>
</body>
</html>
berikutnya siahkan di save dan jalan kan di browser nya karenanya hasilnya siperti dibawah ini,
- sebelum di klik
- setelah di klik
bagai mana teman teman lumayan gampang bukan, Basic-Basic yang dipelajari di Pada Angular JS Part 4.2, mengenai ng-click
bagi bahan berikutnya saya akan menjelaskan mengenai Basic-Basic yang dipelajari di Pada Angular JS Part 4.3, mengenai ng-model
oke sekianlah panduan saya kali ini semoga bermanfaat
Terimakasih
Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 4.1
Dasar-Dasar yang dipelajari di Dalam Angular JS part 4.3
Sumber https://kursuswebsite.org
